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关 部 /Header 


Headers are fixed regions at the top of a screen that can contain a title label, and left/right 
buttons for navigation or to carry out various actions. 


Headers come in a variety of default color options: 


bar-light 


<divclass="bar bar-header bar-light"><hiclass="title">bar-light</h1></div> 


bar-stable 


<divclass="bar bar-header bar-stable"><hiclass="title">bar -stable</h1></div> 


bar-positive 


<divclass="bar bar-header bar-positive"><hiclass="title">bar -positive</h1></div> 


bar-calm 


<divclass="bar bar-header bar-calm"><hiclass="title">bar -calm</h1></div> 


bar-balanced 


<divclass="bar bar-header bar-balanced"><hiclass="title">bar -balanced</h1></div> 


bar-energized 


<divclass="bar bar-header bar-energized"><hiclass="title">bar -energized</h1></div> 


bar-assertive 


<divclass="bar bar-header bar-assertive"><hiclass="title">bar-assertive</h1i></div> 


bar-royal 


<divclass="bar bar-header bar-royal"><hiclass="title">bar -royal</h1></div> 


Co 


头 部 /Header 


<divclass="bar bar-header bar-dark"><hiclass="title">bar -dark</h1></div> 


ionic 二 级 导航 栏 /Sub Header 


A secondary header bar can be placed below the original header bar. There are quite a few 
more ways to customize Headers. Have a look at Button Bars to get other ideas on how it 


could be used. 


<divclass="bar bar-header"><hiclass="title">Header</h1></div><divclass="bar bar-subheader 
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Also, remember to include the has-subheader CSS class to your ion-content directive. 


ionic A 4/Content 


The content area in lonic is the scrollable viewport of your app. While your headers and 
footers will be fixed to the top and bottom, respectively, the content area will fill the 
remaining available space. 


*For more content options, see the Content docs. 


ionic /&.2(/Footer 


Footers are regions at the bottom of a screen that can contain various types of content. 


<divclass="bar bar-footer bar-balanced"><divclass="title">Footer</div></div> 


Footers have the same color options as the headers, just use bar-footer instead of 
bar-header . If a title is present in the footer, any buttons will automatically be placed on the 
correct side of the title in relation to how the markup was written, such as: 


<divclass="bar bar-footer"><buttonclass="button button-clear">Left</button><divclass="tit 
ME 


Additionally, if no title is present and a right side button is required, you'll need to add 
pull-right to the right side button, such as: 





<divclass="bar bar-footer"><buttonclass="button button-clear pull-right">Right</button></ 





ionic#<42/Buttons 


Ah, the Button, an essential part of any mobile experience. Like the Header, they come in 
the full spectrum of lonic's default colors. 


By default a button has display: inline-block applied. Other options include block 
buttons for a full width. 


<buttonclass="button"> 
Default 

</button><buttonclass="button button-light"> 
button-light 

</button><buttonclass="button button-stable"> 
button-stable 

</button><buttonclass="button button-positive"> 
button-positive 

</button><buttonclass="button button-calm"> 
button-calm 

</button><buttonclass="button button-balanced"> 
button-balanced 

</button><buttonclass="button button-energized"> 
button-energized 

</button><buttonclass="button button-assertive"> 
button-assertive 

</button><buttonclass="button button-royal"> 
button-royal 

</button><buttonclass="button button-dark"> 
button-dark 

</button> 


Block Buttons 


Adding button-block toa button applies display: block display. A block button will 
however go 100% of its parent's width. In the example, the button's containing content 
element also has padding applied, so there is some breathing room between the edge of 
the device and the buttons. 

<buttonclass="button button-block button-positive"> 


Block Button 
</button> 


Full Width Block Buttons 


Adding button-full to a button not only applies display: block , but also removes borders 
on the left and right, and any border-radius which may be applied. This style is useful when 
the button should stretch across the entire width of the display. Additionally, the button's 
parent element does not have padding applied. 


<buttonclass="button button-full button-positive"> 
Full width Block Button 
</button> 


Different Sizes 


Adding button-large to a button makes it larger, adding button-small makes it smaller. 


<buttonclass="button button-small button-assertive"> 
Small Button 

</button><buttonclass="button button-large button-positive"> 
Large Button 

</button> 


Outlined Buttons 


Use button-outline to apply an outline button style, which also has a transparent 
background. 


Note: The text and border will take the color of the applied button style, meaning 
button-positive will result in blue text and border, with a transparent background. 


<buttonclass="button button-outline button-positive"> 
Outlined Button 
</button> 


Clear Buttons 


Add button-clear to remove the border and make the text stand out. 


Note: The text will take the color of the applied button style, meaning button-positive will 
result in blue text and no border instead of a blue background. 


<buttonclass="button button-clear button-positive"> 
Clear Button 
</button> 


Icon Buttons 


Icons can easily be added to any button by using either the built in lonicons, or any custom 
font-pack you choose. Learn more about icons. 


Icons can also be set with a child element inside the button, however, assigning the icon 


directly to the button reduces the number of elements in the DOM. 


<buttonclass="button"><iclass="icon ion-loading-c"></i> Loading... 
</button><buttonclass="button icon-left ion-home">Home</button><buttonclass="button icon- 
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Buttons in Headers 


When buttons are placed in headers or footers, they take the style of the bar by default, so 
you don't have to use the extra style classes. To change this, add the desired style class. 


<divclass="bar bar-header"><buttonclass="button icon ion-navicon"></button><hiclass="titl 
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Clear Buttons in Headers 


For a more minimal approach to header buttons, simply add the button-clear classname to 
remove the background button color and border. 


<divclass="bar bar-header"><buttonclass="button button-icon icon ion-navicon"></button><d 
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Button Bar 


Buttons can also be easily grouped together using the button-bar classname. In this 
example, a button bar was added to the default header bar, as well as in the main content 


area of the screen. 


<divclass="button-bar"><aclass="button">First</a><aclass="button">Second</a><aclass="butt 
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列表 /List 


The List is acommon and simple way of displaying... that's right, a list. This is a widely used 
interface across most current mobile OS's, and can include content ranging from basic text 
all the way to buttons, toggles, icons, and thumbnails. 


The list view is a very versatile and powerful component. List views support various 
interaction modes such as editing, swipe to edit, drag to reorder, and pull to refresh. 


For more power you can use lonic's AngularJS directives. Check out the AngularJS list docs 
to get more detailed information. 


<ulclass="list"><liclass="item"> 


</li></ul> 


* For a more extensive overview on Lists, read AngularJS List Docs 


List Dividers 


List items can also be dividers to organize and group the list items. Use the item-divider 
class to create a divider for any child element of the list. By default list item dividers will have 
a different background color and font-weight, but this is easily customizable. 


<divclass="list"><divclass="item item-divider"> 
Candy Bars 
</div><aclass="item"href="#"> 
Butterfinger 
</a> 


</div> 


List Icons 


Lists can have icons assigned either to the left and/or right side of each list item, and the 
alignment classes should be assigned to each item element. Icons can easily be added to 
any item by using either the built in lonicons, or any custom font-pack you choose. Learn 
more about icons. 


Use item-icon-left to line up the icon to the left, and item-icon-right to set the icon to 
the right. When a list item has an icon on both sides then both classes will need to be 
applied. 


This example uses an <a> element for each item, which allows the entire list item to be 
tappable. If the item is an <a> or <button> element, and no icon has been added to the 
right, then a small right arrow will automatically be added. 


In the example, the first item only has a left aligned icon. The second item has both left and 

right side icons. The third item has no a right side icon assigned (whichs defaults to the right 

arrow). Additionally, the third item also adds an item-note . The fourth icon has added a 
badge element. 


<divclass="list"><aclass="item item-icon-left"href="#"><iclass="icon ion-email"></i> 

Check mail 

</a><aclass="item item-icon-left item-icon-right"href="#"><iclass="icon ion-chatbubble- 
Call Ma 
<iclass="icon ion-ios-telephone-outline"></i></a><aclass="item item-icon-left"href="# 
Record album 
<spanclass="item-note"> 

Grammy 

</span></a><aclass="item item-icon-left"href="#"><iclass="icon ion-person-stalker"></ 
Friends 
<spanclass="badge badge-assertive">0</span></a></div> 
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List Buttons 


Use item-button-right Or item-button-left to place a button within an item. 


<divclass="list"><divclass="item item-button-right"> 
Call Ma 
<buttonclass="button button-positive"><iclass="icon ion-ios-telephone"></i></button>< 


</div> 
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Item Avatars 


Item avatars are essentially a showcase of an image larger than an icon, but smaller than a 
thumbnail. To create a avatar item, use the item-avatar classname. 


<divclass="list"><aclass="item item-avatar"href="#"><imgsrc="venkman. jpg"><h2>Venkman</h2 


</div> 
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Item Thumbnails 


Item Thumbnails are essentially a showcase of an image larger than an icon, and will often 
span/define the entire height of the list item. To create a thumbnail styled item, use the 
item-thumbnail-left to have it align on the left, and item-thumbnail-right for the right side. 


<divclass="list"><aclass="item item-thumbnail-left"href="#"><imgsrc="cover.jpg"><h2>Prett 


</div> 
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Inset Lists 


Lists can also be inset inside their container, instead of going full width. The main difference 
is thata list list-inset element has margin. An inset list is similar to a card, except an 
inset list does not have a box-shadow. Since list list-inset does not have a box-shadow, 
it'll be more performant when scrolling. Inset forms shows other examples of its usage. 


<divclass="list list-inset"><divclass="item"> 
Raiders of the Lost Ark 
</div> 


</div> 


Cards 


Cards have become widely used in recent years. They're are a great way to contain and 
organize information, while also setting up predictable expectations for the user. With so 
much content to display at once, and often so little screen realestate, cards have fast 
become the design pattern of choice for many companies, including the likes of Google, 
Twitter, and Spotify.. 


For mobile experiences, Cards make it easy to display the same information visually across 
many different screen sizes. They allow for more control, are flexible, and can even be 
animated. Cards are usually placed on top of one another, but they can also be used like a 
"page" and swiped between, left and right. 


<divclass="card"><divclass="item item-text-wrap"> 
This is a basic Card which contains an item that has wrapping text. 
</div></div> 


Card Headers and Footers 


Cards can be customized similarly to how you would fill a normal screen. For example, a 
card can easily have Headers and Footers placed inside of them. Add the item-divider 
classname above or below the content within the card element. 


<divclass="card"><divclass="item item-divider"> 
I'm a Header in a Card! 
</div><divclass="item item-text-wrap"> 
This is a basic Card with some text. 
</div><divclass="item item-divider"> 
I'm a Footer in a Card! 
</div></div> 


Card Lists 


Use the list card classname to create a card with lists. 


<divclass="list card"><ahref="#"class="item item-icon-left"><iclass="icon ion-home"></i> 

Enter home address 

</a><ahref="#"class="item item-icon-left"><iclass="icon ion-ios-telephone"></i> 
Enter phone number 

</a><ahref="#"class="item item-icon-left"><iclass="icon ion-wifi"></i> 
Enter wireless password 

</a><ahref="#"class="item item-icon-left"><iclass="icon ion-card"></i> 
Enter card information 

</a></div> 
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Card Images 


Images look great in cards, and can be combined with lists and other elements. 


<divclass="list card"><divclass="item item-avatar"><imgsrc="avatar.jpg"><h2>Pretty Hate M 
Start listening 
</a></div> 








Card Showcase 


Here is a showcase of a card using several different items. It begins with the list card 
element, utilizing the item-avatar list item, an item-body element for images and text, and 
a footer with the item-divider classname. 


<divclass="list card"><divclass="item item-avatar"><imgsrc="mcfly.jpg"><h2>Marty McFly</h 

This is a "Facebook" styled Card. The header is created from a Thumbnail List item, 

the content is from a card-body consisting of an image and paragraph text. The foot 
consists of tabs, icons aligned left, within the card-footer. 

</p><p><ahref="#"class="subdued">1 Like</a><ahref="#"class="Subdued">5 Comments</a></ 


Like 

</a><aclass="tab-item"href="#"><iclass="icon ion-chatbox"></i> 
Comment 

</a><aclass="tab-item"href="#"><iclass="icon ion-share"></i> 
Share 

</a></div></div> 





EDY 


表单 /Forms & Inputs 


A list is also used to group related input elements. Both item-input and item is then 
used to designate each individual input field and it's associated label. 


lonic prefers to create the item-input out ofthe <label> element so that when any part of 
the row is tapped then the underlying input receives focus. 


Additionally, developers should be aware of the various HTML5 Input types so users will be 
presented with the appropriate virtual keyboard. 


Text Input: Placeholder Labels 


In the example, it'll default to 100% width (no borders on the left and right), and uses the 

placeholder attribute to simulate the input's label. Then the user begins to enter text into 
the input the placeholder label will be hidden. Notice how <textarea> can also be used as a 
multi-line text input. 


<divclass="list"><labelclass="item item-input"><inputtype="text"placeholder="First Name"> 





Text Input: Inline Labels 


Use input-label to place a label to the left of the input element. When the user enters text 
the label does not hide. Note that there's nothing stopping you from also using a 
placeholder label too. 


<divclass="list"><labelclass="item item-input"><spanclass="input -label">Username</span><i 








Text Input: Stacked Labels 


Stacked labels always places the label on top of the input. Each item should have 

item-stacked-label assigned, and the input's label should have input-label assigned. 
This example also uses the placeholder attribute so users have a hint of what type of text 
the input is looking for. 


<divclass="list"><labelclass="item item-input item-stacked-label"><spanclass="input -label 
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Text Input: Floating Labels 


Floating labels are just like Stacked Labels, except that their labels animate, or "float" up 
when text is entered in the input. Each item should have item-floating-label assigned, 
and the input's label should have input-label assigned. 


Enter text in the example to the right to see the floating labels in action. This example also 
uses the placeholder attribute so user's have a hint of what type of text the input is looking 
for. 


<divclass="list"><labelclass="item item-input item-floating-label"><spanclass="input -labe 





Inset Forms 


By default each input item will fill 100% of the width of its parent element (the list). However, 
you can inset the list using either the list list-inset or card classnames. The card 
classname applies a lower box shadow while list-inset does not. Additionally, if the list's 
parent element has padding assigned then this will also give the form an inset appearance. 


<divclass="list list-inset"><labelclass="item item-input"><inputtype="text"placeholder="F 
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Inset Inputs 


Using list-inset will inset the entire list, whereas placing item-input-inset will inset an 
input into an individual list item. Placing a button inside the item 


<divclass="list"><divclass="item item-input-inset"><labelclass="item-input -wrapper"><inpu 
Submit 
</button></div></div> 








Input Icons 


Icons can be easily added to the left of an item-input input. Simply add an icon before the 
<input> . By default the icon will take the color of label text. However, you can also use add 
placeholder-icon to give it a placeholder color. 


<divclass="list list-inset"><labelclass="item item-input"><iclass="icon ion-search placeh 
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Header Inputs 


Inputs can also be placed in headers, along with buttons to submit or cancel the form. 


<divclass="bar bar-header item-input-inset"><labelclass="item-input-wrapper"><iclass="ico 
Cancel 
</button></div> 








Toggle 


A toggle technically is the same thing as an HTML checkbox input, except it looks different 
and is easier to use on a touch device. lonic prefers to wrap the checkbox input with the 
<label> in order to make the entire toggle easy to tap or drag. 


Toggles can also have colors assigned to them, such as toggle-assertive to assign the 
assertive color. 


<labelclass="toggle"><inputtype="checkbox"><divclass="track"><divclass="handle"></div></d 
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This is an example of multiple toggles within a list. Note the item-toggle class was added 
along side item for each item. 


<ulclass="list"><liclass="item item-toggle"> 
HTML5 
<labelclass="toggle toggle-assertive"><inputtype="checkbox"><divclass="track"><divel 


</ul> 
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Checkbox 


A checkbox is no different than the HTML checkbox input, except it's styled differently. This 
is an example of multiple checkboxes within a list. Note the item-checkbox class was added 
along side item for each item. 


lonic prefers to use the <label> element for a checkbox item in order to make the entire 
checkbox tappable. 


Checkboxes can also have colors assigned to them, such as checkbox-assertive to assign 
the assertive color. 


<ulclass="list"><liclass="item item-checkbox"><labelclass="checkbox"><inputtype="checkbox 
Flux Capacitor 
</li> 


</ul> 
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Radio Button List 


Radio buttons act no differently as standard radio input elements. Following this convention 
will display a list of radio buttons similarly seen in modern app. 


Each item-radio must have a radio input with the same input name attribute. The 
radio-icon Class is used to designate when to show and hide the icon element. 


lonic prefers to use the <label> element for a radio item in order to make the entire area 
tappable. 
<divclass="list"><labelclass="item item-radio"><inputtype="radio"name="group"><divclass=" 
Go 


</div><iclass="radio-icon ion-checkmark"></i></label> 


</div> 


Bee 





Range 


This is a Range. Ranges can be themed to any default lonic color, and used in various other 
elements such as a list item or card. 


<divclass="item range"><iclass="icon ion-volume-low"></i><inputtype="range"name="volume"> 
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Select 


lonic's select is styled so its appearance is prettied up relative to the browser's default style. 
However, when the select elements is opened, the default behavior on how to select one of 
the options is still managed by the browser. 


Each platform's user-interface will be different as the user is selecting an option. For 
example, on a desktop browser you'll see the traditional drop down interface, whereas 
Android often has a radio-button list popup, and iOS has a custom scroller covering the 
bottom half of the window. 


<divclass="list"><labelclass="item item-input item-select"><divclass="input-label"> 
Lightsaber 
</div><select><option>Blue</option><optionselected>Green</option><option>Red</option> 


SS eee >l 






tn 4k 4% 2ITabs 


Tabs are a horizontal region of buttons or links that allow for a consistent navigation 
experience between screens. It can contain any combination of text and icons, and is a 
popular method for enabling mobile navigation. 


* For building tabbed interfaces, see the Tabs documentation. 


The containing element should have the tabs classname, and each tab should have the 
tab-item classname. By default, tabs will be without an icon and text-only. 


<divclass="tabs"><aclass="tab-item"> 
Home 
</a><aclass="tab-item"> 
Favorites 
</a><aclass="tab-item"> 
Settings 
</a></div> 


Tabs can be styled to match the standard lonic colors (the example is using the default 


color. Use these classes to change the color of the tab bar: 
tabs-default “tabs-light “tabs-stable° ~tabs-positive  ~tabs-calm tabs-balanced ‘tabs-energ. 


To hide the tabbar but still show the content, add the tabs-item-hide class. Also, whenever 
you are using tabs, remember to add the has-tabs CSS class to. 


Icon-only Tabs 


Add tabs-icon-only along with the tabs classname. 


<divclass="tabs tabs-icon-only"><aclass="tab-item"><iclass="icon ion-home"></i></a><aclas 
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Top Icon Tabs 


Classic tabs. Add tabs-icon-top along with the tabs classname. 


<divclass="tabs tabs-icon-top"><aclass="tab-item"><iclass="icon ion-home"></i> 


Home 

</a><aclass="tab-item"><iclass="icon ion-star"></i> 
Favorites 

</a><aclass="tab-item"><iclass="icon ion-gear-a"></i> 
Settings 


</a></div> 


Left Icon Tabs 


Add tabs-icon-left along withthe tabs classname. 


<divclass="tabs tabs-icon-left"><aclass="tab-item"><iclass="icon ion-home"></i> 


Home 

</a><aclass="tab-item"><iclass="icon ion-star"></i> 
Favorites 

</a><aclass="tab-item"><iclass="icon ion-gear-a"></i> 
Settings 


</a></div> 


Striped Style Tabs 


Add tabs-striped to an element above the tabs classname for Android style tabs. 
Optionally, also add tabs-top to position the tab at the top 


Get granular color control for striped tabs with the tabs-background-{color} and 
tabs-color-{color} Classes, where {color} is any of the ionic color swatches: default , 


light , stable , positive , calm, balanced , energized , assertive , royal , Of dark 


Note, that to have the header blend with the top tabs, add the has-tabs-top class to the 
header. 


<divclass="tabs-striped tabs-top tabs-background-positive tabs-color-light"><divclass="ta 


Test 

</a><aclass="tab-item"href="#"><iclass="icon ion-star"></i> 
Favorites 

</a><aclass="tab-item"href="#"><iclass="icon ion-gear-a"></i> 
Settings 

</a></div></div><divclass="tabs-striped tabs-color-assertive"><divclass="tabs"><acl 
Test 

</a><aclass="tab-item"href="#"><iclass="icon ion-star"></i> 
Favorites 

</a><aclass="tab-item"href="#"><iclass="icon ion-gear-a"></i> 
Settings 

</a></div></div> 
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Grid 


lonic's grid system is different than most because of its use of the CSS Flexible Box Layout 
Module standard. The advantage here is that the devices that lonic supports, all support 
flexbox. 


Simply add columns you want in a row, and they'll evenly take up the available space. If you 
want three columns, add three columns, if you want five columns, add five columns. There's 
no restriction to a 12 column grid, or having to explicitly state how large each column should 
be. And to add to the crazy, you can vertically align content within each column. 


Use the row classname is used to designate, surprise, a row, and col is used fora 
column. In the demo to the right we chose to have four, then two, columns, but we could 
have just as easily used 3, 6, 7, 23, etc., it doesn't matter. Point is, add the number of 
columns your layout requires and don't worry about figuring out the percentages because it 
figures it out automagically. 


Note: The borders and gray background in the demo were added so it's easier to see the 
structure. 


网 格 布局 /Grid: Evenly Spaced Columns 


By default every col added inside a row will automatically receive an equal amount of the 
available area. Notice in the code below that no sizes are specified anywhere in the 
classnames, yet each of the five columns in this example will each evenly take up 20% of 
the available width (thank you flexbox). 


<divclass="row"><divclass="col">.col</div><divclass="col">.col</div><divclass="col">.col< 
E E ` 


Note: The borders and gray background in the demo were added so it's easier to see the 





structure. 


Grid: Explicit Column Sizes 


You can explicitly state the size of a column if for example you'd want specific columns to be 
larger than the others in the same row. By default each column will evenly take up the 
available area, but in the case where a column should be a certain size, lonic's grid uses a 
percent system (in contrast to a locked in 12 column grid). 


An advantage with this grid system is that you only have to state the percentage for the 
column that needs it, and the others will still evenly divide up the available areas. 


<divclass="row"><divclass="col col-50">.col.col-50</div><divclass="col">.col</div><divcla 





Sf E 

Note: The borders and gray background in the demo were added so it's easier to see the 

structure. 

Explicit Column Percentage Classnames 

.col-10 10% 
.col-20 20% 
.col-25 25% 
.col-33 33.3333% 
.col-50 50% 
.col-67 66.6666% 
.col-75 75% 
.col-80 80% 


.col-90 90% 


Grid: Offset Columns 


Columns can also be offset from the left. We'll let the code and demo speak for itself. 


<divclass="row"><divclass="col col-33 col-offset-33">.col</div><divclass="col">.col</div> 








«| — } 

Note: The borders and gray background in the demo were added so it's easier to see the 

structure. 

Offset Column Percentage Classnames 

.col-offset-10 10% 
.col-offset-20 20% 
.col-offset-25 25% 
.col-offset-33 33:3333% 
.col-offset-50 50% 
.col-offset-67 66.6666% 
.col-offset-75 75% 
.col-offset-80 80% 


.col-offset-90 90% 


Grid: Vertically Align Columns 


Another trick up flexbox's sleeve is the ability to easily vertically align columns. Vertical 
alignment includes top, center and bottom, and can be applied to every column in a row, or 
to specific columns. 


In the demo, we've made the last column in each row to have the tallest content in order to 
demonstrate how the content of the others vertically align. The first row shows the default 
which is to take the same height as the tallest column in the same row. 


<divclass="row"><divclass="col">.col</div><divclass="col">.col</div><divclass="col">.col< 


o g 





Note: The borders and gray background in the demo were added so it's easier to see the 
structure. 


Responsive Grid 


There may be cases where a row of columns will not fit nicely in the available area. The 
responsive classes can be used to turn each column in a row into its own row at certain 


breakpoints. 


For example, if you want a row of columns to turn in to stacked rows when the viewport is 
pretty small, you would use the .responsive-sm class. The example to the right is a 
simulation of what it'd look like. 


<divclass="row responsive-sm"><divclass="col">.col</div><divclass="col">.col</div><divcla 
ee SSS: 


Note: The borders and gray background in the demo were added so it's easier to see the 





structure. 

Responsive Class Break when roughly 
.responsive-sm Smaller than landscape phone 
.responsive-md Smaller than portrait tablet 
.responsive-lg Smaller than landscape tablet 


For further configuration, each class uses a Sass variable that can be changed to your liking. 
There's also a responsive-grid-break mixin you can use to create your own Classes. 


Utility 


lonic comes with a handful of utility classes to help quickly style your design. Each are 
optional. 


Colors 


lonic comes with a set of colors to start with, but as a general rule colors are meant to be 
overridden. We prefer saying that lonic provides a recommended naming convention for 
your colors, swatches, themes, etc. 


Utility colors are added to help set a naming convention. You'll notice lonic purposely does 
not use words like "red" or "blue", but instead have colors which represent an emotion or 
generic theme. 


Let's be realistic, assigning colors is one of the easier tasks in CSS, and each app will have 
different requirements for colors. lonic's goal is to provide a clean system to build on top of 
and maintain, and stays away from dictating how each app chooses to color its custom 
design. 


To customize the colors you can simply override those coming from the ionic.css CSS file. 
Additionally, since lonic is built using Sass, for more power and flexibility you could also 
modify and extend the color variables within the _variables.scss file. 


* For more flexibility, you can Customize lonic With Sass 


Icons 


lonic also comes with its own free and open-sourced icon font, lonicons, with over 500 icons 
to choose from. 


Simply add icon and the lonicon classname for the icon to show, which can be easily 
looked up on the lonicons homepage. 


<iclass="icon ion-star"></i> 


While it's possible for buttons to use a child <i> to set the icon, they can also set their icon 
just by setting the buttons own class. Please take a look at button icon docs for more info. 


Note: lonic is certainly not restricted to using only the lonicons icon pack, so please feel free 
to use any icons you wish. 


Padding 


Many components in lonic purposely have both padding and margin reset set to zero. In 


many instances apps will have components bleed to the edge of the screen, and by starting 


each component at zero developers can easily control padding and margins throughout the 


app. 


The padding utility classes can be reused to give any element's content some breathing 


room, meaning it adds a default 10px between the outer box of the element and its inner 


content. The following classes are not required for any element, but may be helpful with your 


layout. 


padding 
padding 


padding- 
padding- 
padding- 
padding- 
-left Adds padding to the left. 


padding 


Adds padding around every side. 


-vertical Adds padding to the top and bottom. 


horizontal Adds padding to the left and right. 
top Adds padding to the top. 

right Adds padding to the right. 

bottom Adds padding to the bottom. 


lonic AngularJS 扩展 


来 源 : lonic AngularJS 扩展 


lonic 既 是 一 个 CSS 框 架 也 是 一 个 Javascript UI 库 。 许 多 组 件 需 要 Javascript 才 能 产生 神奇 的 效 
果 ， 尽 管 通常 组 件 不 需要 编码 ， 通 过 框架 扩展 可 以 很 容易 地 使 用 ， 比 如 我 们 的 Angularlonic 扩 
展 。 

lonic 遵 循 视图 控制 模式 ， 通 俗 的 理解 和 Cocoa 触摸 框架 相似 。 在 视图 控制 模式 中 ， 我 们 将 界 
面 的 不 同 部 分 分 为 子 视图 或 包含 其 他 视图 的 子 视图 控制 器 。 然 后 视图 控制 器 “驱动 "内 部 视图 来 
提供 交互 和 UI| 功 能。 一 个 很 好 的 例子 就 是 标签 栏 (Tab Bar) 视图 控制 器 处 理 点 击 标签 栏 在 一 
系列 可 视 化 面板 间 切 换 。 

浏览 我 们 的 API 文 档 来 了 解 视 图 控制 器 和 lonic 中 可 用 的 Javascript 实 用 工具 。 


lonic 是 目前 最 有 潜力 的 一 款 HTML5 手机 应 用 开发 框架 。 通 过 SASS 构建 应 用 程序 ， 它 提供 
TRS UI 组 件 来 帮助 开发 者 开发 强大 的 应 用 。 它 使 用 JavaScript MVVM 框架 和 AngularJS 
来 增强 应 用 。 提 供 数据 的 双向 绑 定 ， 使 用 它 成 为 Web 和 移动 开发 者 的 共同 选择 。 


快速 学 习 ionic 也 可 以 观看 ionic 免 费 视频 教程 Ilonic 教 程 


Headers/Footers (i 4 i) 


ion-header-bar 


在 内 容 顶 部 添加 一 个 固定 header 栏 。 


如 果 应 用 'bar-subheader' 类 ， 就 可 以 成 为 一 个 subheader (在 下 面 ) 。 查看 header CSS 文 
档 。 


用 法 


<ion-header-bar align-title="left" class="bar-positive"> 
<div class="buttons"> 
<button class="button" ng-click="doSomething()"> 左 侧 按 钮 </button> 
</div> 
<h1 class="title">Title!</h1> 
<div class="buttons"> 
<button class="button">#4 liz 42</button> 
</div> 
</ion-header -bar> 
<ion-content> 
一 些 内 容 ! 
</ion-content> 


属性 类 型 详情 
align-title( 可 SEE 标题 对 齐 的 位 置 。 可 用 : 'left', 'right', or 'center'。 默 认为 


选 ) 'center' ° 


ion-footer-bar 


在 内 容 底 部 添加 一 个 国定 的 footer 栏 。 


如 果 应 用 'bar-subfooter' 类 ， 就 成 了 一 个 subfooter (在 上 面 ) 。 查 看 footer CSS 文档 。 


用 法 


<ion-content> 
一 些 内 容 ! 
</ion-content> 
<ion-footer-bar align-title="left" class="bar-assertive"> 
<div class="buttons"> 
<button class="button">£ tl 4 42</button> 
</div> 
<h1 class="title">Title!</h1> 
<div class="buttons" ng-click="doSomething()"> 
<button class="button"># Milde 42</button> 
</div> 
</ion- footer -bar> 


属性 类 型 详情 
align-title( 可 ea 标题 对 齐 的 位 置 。 可 选 : left,，'right', 或 'center'。 默认 为 


选 ) 'center' ° 


Content ( 内容) 


1ion-content 


授权 : $ionicScrollDelegate 


ionContent 指 令 提 供 一 个 多 用 的 内 容 区 域 ， 该 区 域 可 以 用 lonic 的 自 定 义 滚 动 视图 进行 配置 ， 
或 浏览 器 内 置 的 溢出 滚动 。 


在 大 多 数 情况 下 ， 我 们 建议 使 用 lonic 的 定制 滚动 功能 ， 有 时 (出 于 性 能 原因 ) 仅 用 浏览 器 原 
生 的 溢出 滚动 就 足够 了 ， 因 此 我 可 以 轻松 地 在 设置 了 lonic 滚 动 和 溢出 滚动 问 切换 。 


你 可 以 用 ionRefresher 指令 实现 拉动 刷新 ， 并 可 以 用 ioninfinitescroll 指令 实现 无 限 滚动 。 


用 法 


<ion-content 
[delegate-handle=""] 
[padding=""] 
[scroll=""] 
[overflow-scroll=""] 
[has-bouncing=""] 
[on-scroll=""] 
[on-scroll-complete=""]> 


</ion-content> 


API 








属性 类 型 详情 

delegate- 字符 事 È 4) #4 Fl TARR HA $ionicscrollDelegate 的 滚动 视 
handle(7 2%) 图 。 

是 否 在 内 容 上 添加 内 填充 。 在 iOS 上 默认 为 true， 在 

of a, ae 是 

Stelling SS) Android A false ° 
scroll( 可 选 ) 布尔 值 EAA SRA o RikAtrue 。 
2 To pni ”是 否 用 溢出 滚动 代替 lonic 滚 动 。 
has-bouncing( 可 FRE 是 否 允 许 内 容 滚 动 反 弹 到 边缘 。iOS 上 默认 为 true， 
选 ) Android 上 默认 为 false。 
on-scroll( 可 选 ) 表达 式 当 内 容 滚动 时 表现 的 评估 。 
on Scron 表达 式 。 一 个 滚动 动作 完成 时 表现 的 评估 。 


complete(7 2%) 


ion-refresher 


隶属 于 ioncontent 或 ionScroll 
允许 你 添加 下 拉 刷 新 滚动 视图 。 
把 它 作为 ioncontent 或 ionScroll 元 素 的 第 一 个 子 元 素 


当 刷 新 完成 时 ， 从 你 的 控制 器 中 广播 〈《 $broadcast ) H 'scroll.refreshComplete' # 4} ° 


用 法 


<ion-content ng-controller="MyController"> 
<ion-refresher 
pulling-text="T4Al a..." 
on-refresh="doRefresh()"> 
</ion-refresher> 
<ion-list> 
<ion-item ng-repeat="item in items"></ion-item> 
</ion-list> 
</ion-content> 


angular.module('testApp', ['ionic']) 
.controller('MyController', function($scope, $http) { 
$scope.items = [1,2,3]; 
$scope.doRefresh = function() { 
$http.get('/new-items' ) 
.success(function(newItems) { 
$scope.items = newItems; 
}) 
.finally(function() { 
// 停止 广播 jon-refresher 
$scope.$broadcast('scroll.refreshComplete' ); 


属性 类 型 详情 


on-refresh( 可 选 ) 表达 式 当 用 户 下 拉 到 一 定 程度 然后 开始 刷新 时 触发 。 
on-pulling( 可 选 ) 表达 式 当 用 户 开 始 下 来 刷新 时 触发 。 

pulling-icon(7 #) Pa a 2 户 下 拉 时 显示 的 图 标 。 黑 认 : 'ion-arrow-down- 
pulling-text( 可 选 ) 字符 串 当 用 户 下 拉 时 显示 的 文字 。 

有 ee ”用 户 刷 新 后 显示 的 图 标 。 


refreshing-text( 可 选 ) EPT 用 户 刷新 后 显示 的 文字 。 


ion-pane 
一 个 简单 的 适应 内 容 的 容器 ， 无 不 良 影响 。 在 一 个 元 素 上 添加 'pane'。 
用 法 


<ion-pane> 


</ion-pane> 


Scroll (滚动 ) 


ion-scroll 


授权 : $ionicScrollDelegate 


创建 一 个 包含 所 有 内 容 的 可 滚动 容器 。 


<ion-scroll 
[delegate-handle=""] 
[direction=""] 
[paging=""] 
[on-refresh=""] 
[on-scroll=""] 
[scrollbar -x=""] 
[scrollbar -y=""] 
[Zooming=""] 
[min-zoom="""] 
[max-zoom="""]> 


</ion-scroll> 


API 


属性 类 型 详情 
delegate-handle( 可 选 ) i 该 句柄 利用 SionicScrolldelegate 指定 滚动 视图 。 
direction( 可 选 ) 字符 串 滚动 的 方向 。X A y'o Ri ty'e 
paging( 可 选 ) 布尔 什 分 页 是 否 滚动 。 
on-refresh( 可 选 ) RRA 调用 下 拉 刷 新 ， 由 ionRefresher 触发 。 
on-scroll( 可 选 ) 表达 式 当 用 户 滚动 时 触发 。 
scrollbar-x( 可 选 ) 布尔 什 是 否 显 示 水 平 滚 动 条 。 默 认为 false 。 
scrollbar-y( 可 选 ) 布尔 什 是 否 显示 重 直 滚动 条 。 默 认为 true。 
zooming( 可 选 ) 布尔 什 是 否 支 持 双 指 缩放 。 
min-zoom( 可 选 ) 整数 允许 的 最 小 缩放 量 (默认 为 0.5) 


max-zoom( 可 选 ) 整数 允许 的 最 大 缩放 量 (默认 为 3) 


ion-infinite-scroll 


隶属 于 ioncontent 或 ionScroll 
当 用 户 到 达 页 脚 或 页 脚 附 近 时 ，ionlnfiniteScroll 指 令 允 许 你 调用 一 个 函数 。 


当 用 户 滚动 的 we 超出 底部 的 内 容 时 ， 就 会 触发 你 指定 的 on-infinite ° 
用 法 


<ion-content ng-controller="MyController"> 
<ion-infinite-scroll 
on-infinite="loadMore()" 
distance="1%"> 
</ion-infinite-scroll> 
</ion-content> 


function MyController($scope, $http) { 
$scope.items = []; 
$scope.loadMore = function() { 
$http.get('/more-items').success(function(items) { 
useItems(items); 
$scope.$broadcast('scroll.infiniteScrollComplete' ); 
}); 


$scope.$on('stateChangeSuccess', function() { 
$scope.loadMore(); 


3); 
} 


wv 


A 


没有 更 多 数据 加 载 时 ， 就 可 以 用 一 个 简单 的 方法 阻止 无 限 滚 动 ， 那 就 是 angular 的 ng-if 48 


<ion-infinite-scroll 
ng-if="moreDataCanBeLoaded()" 
icon="ion-loading-c" 
on-infinite="loadMoreData()"> 

</ion-infinite-scroll> 


API 


属性 类 型 详情 
on-infinite 表达 式 当 滚 动 到 底部 时 触发 的 时 间 。 
distance( 可 选 ) 字符 串 从 底部 滚动 到 触发 on-infinite 表 达 式 的 距离 。 默 认 : 1%。 
icon( 可 选 ) 字符 串 当 加 载 时 显示 的 图 标 。 上 默认 : 'ion-loading-d' ° 
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$ionicScrollDelegate 


授权 控制 滚动 视图 (通过 ioncontent 和 ionScroll 指令 创建 ) © 


该 方法 直接 被 $ionicScrollDelegate 服 务 触发 ， 来 控制 所 有 滚动 视图 。 用 $getByHandle 方 法 控 
制 特定 的 滚动 视图 。 


用 法 


<body ng-controller="MainCtrl"> 
<ion-content> 
<button ng-click="scrollTop()">i 2] m% !</button> 
</ion-content> 
</body> 


function MainCtrl($scope, $ionicScrollDelegate) { 
$scope.scrollTop = function() { 
$ionicScrollDelegate.scrollTop(); 
}; 


} 


高 级 用 法 的 例子 ， 用 带 有 两 个 滚动 区 域 的 delegate-handle 来 特殊 控制 。 


<body ng-controller="MainCtr1l"> 
<ion-content delegate-handle="mainScroll"> 
<button ng-click="scrollMainToTop()"> 
滚动 内 容 到 顶部 ! 
</button> 
<ion-scroll delegate-handle="small" style="height: 100px;"> 
<button ng-click="scrol1SmallToTop()"> 
滚动 小 区 域 到 顶部 ! 
</button> 
</ion-scroll> 
</ion-content> 
</body> 


function MainCtrl($scope, $ionicScrollDelegate) { 
$scope.scrollMainToTop = function() { 
$ionicScrollDelegate.$getByHandle('mainScroll').scrollTop(); 
}; 
$scope.scrollSmallToTop = function() { 
$ionicScrollDelegate.$getByHandle('small').scrollTop(); 
}; 


resize() 


告诉 滚动 视图 重新 计算 它 的 容器 大 小 。 


scrollTop([shouldAnimate ] ) 


参数 类 型 详情 
shouldAnimate( 可 选 ) 布尔 值 是 否 应 用 滚动 动画 。 


scrollBottom([shouldAnimate ] ) 


参数 类 型 详情 
shouldAnimate( 可 选 ) 布尔 什 是 否 应 用 滚动 动画 。 


scrollTo(left, top, [shouldAnimate] ) 


参数 类 型 详情 
left 数值 水 平 滚动 的 值 。 
top 数值 重 直 滚动 的 值 。 
shouldAnimate( 可 选 ) 布尔 什 是 否 应 用 滚动 动画 。 


scrollBy(left, top, [shouldAnimate] ) 


参数 类 型 详情 
left 数值 水 平 滚动 的 偏 移 量 。 
top 数值 E ARAA E o 
shouldAnimate( 可 选 ) 布尔 值 是 否 应 用 滚动 动画 。 
getScrollPosition() 


e 返回 : 对 象 滚动 到 该 视图 的 位 置 ， 具 有 一 下 属性 : 
o {数值 ] left 从 左 侧 到 用 户 已 滚动 的 距离 (开始 为 0) 。 
o {Rä} top 从 顶部 到 用 户 已 滚动 的 距离 (开始 为 0) 。 


anchorScroll([shouldAnimate]) 


告诉 滚动 视图 用 一 个 带 有 id 的 滚动 元 素 匹 配 window.location.hash ° 


如 果 没 有 匹配 到 元 素 ， 它 会 滚动 到 顶部 。 


参数 类 型 详情 
shouldAnimate( 可 选 ) 布尔 什 是 否 应 用 滚动 动画 。 
getScrollView( ) 


e 返回 : 对 象 匹配 具有 授权 的 滚动 视图 。 


rememberScrollPosition(id) 


当 滚 动 视图 被 销毁 时 〈 用 户 离 开 页 面 ) ， 页 面 最 后 的 滚动 位 置 会 被 指定 的 索引 保存 。 


注意 : 根据 一 个 ion-nav-view 将 页 面 和 一 个 视图 关联 ，rememberScrollPosition 自 动 保存 它们 


的 滚动 。 
相关 方法 : scrollToRememberedPosition, forgetScrollPosition ( 低 ) ° 


在 下 面 的 例子 中 ，ion-scroll 元 素 的 滚动 位 置 会 被 保留 ， 甚至 当 用 户 切换 开关 时 。 


<ion-toggle ng-model="shouldShowScrollView"></ion-toggle> 
<ion-scroll delegate-handle="myScroll" ng-if="shouldShowScrollView"> 
<div ng-controller="Scrollctrl1"> 
<ion-list> 
<ion-item ng-repeat="i in items">{{i}}</ion-item> 
</ion-list> 
</div> 
</ion-scroll> 


function Scrollctrl1($scope, $ionicScrollDelegate) { 
var delegate = $ionicScrollDelegate.$getByHandle('myScroll'); 





// 这 里 可 以 放任 何 唯一 的 ID。 重 点 是 : 要 在 每 次 重新 创建 控制 器 时 
// 我 们 要 加 载 当前 记 住 的 滚动 值 。 
delegate.rememberScrollPosition('my-scroll-id'); 
delegate.scrollToRememberedPosition(); 
$scope.items = []; 
for (var i=0; i<100; i++) { 

$scope.items.push(i); 





参数 类 型 详情 


id 字符 串 保留 已 滚动 位 置 的 滚动 视图 的 id 。 


forgetScrollPosition() 


停止 保存 这 个 滚动 视图 的 滚动 位 置 。 


scrollToRememberedPosition( [shouldAnimate ] ) 


如 果 这 个 滚动 视图 有 个 和 它 的 滚动 位 置 关联 的 id (通过 调用 rememberScrollPosition 方 法 ) > 
然后 记 住 那 个 位 置 ， 加 载 那个 位 置 然后 滚动 到 那个 位 置 。 


参数 类 型 详情 
shouldAnimate( 可 选 ) 布尔 什 是 否 应 用 滚动 动画 。 
$getByHandle (handle) 
参数 类 型 详情 
handle art 


e 返回 : delegateInstance 一 个 代表 性 实例 就 是 只 控制 带 有 delegate-handle 的 滚动 视图 来 
匹配 给 定 的 句柄 。 


例如 : $ionicScrollDelegate.$getByHandle('my-handle').scrollTop(); 


Tabs (选项 卡 ) 


ion-tabs 


授权 : $ionicTabsDelegate 

See the Pen by lonic (@ionic) on CodePen. 

带 有 标签 栏 的 多 标签 界面 的 功能 是 ， 通 过 标签 切换 一 组 “页面 "。 
在 某 个 元 素 上 指定 任何 标签 类 或 动画 类 来 定义 它 的 外 观 和 感觉 。 
AA ionTab 指令 文档 来 了 解 各 个 选项 卡 的 更 多 详情 


注意 : 不 要 将 ion-tabs 置 入 一 个 ion-content 元 素 内 ; 它 会 造成 一 定 的 已 知 CSS 错 误 。 


用 法 


<ion-tabs class="tabs-positive tabs-icon-only"> 

<ion-tab title=" 首 页 " icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline"> 
<!-- 标签 1 内 容 --> 

</ion-tab> 

<ion-tab title=" 关 于 " icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline"> 
<!-- 标签 2 内 容 --> 

</ion-tab> 

<ion-tab title=" 设 置 " icon-on="ion-ios7-gear" icon-off="ion-ios7-gear-outline"> 
<!-- 标签 3 AB --> 

</ion-tab> 


</ion-tabs> 


API 


属性 类 型 详情 


delegate-handle( 可 选 ) atte 该 句柄 用 $ionictabsDelegate 来 标识 这 些 选项 卡 。 


ion-tab 


隶属 于 [ionTabs](/js_doc-index-name-ionTabs/) </small> 
包含 一 个 选项 卡 内 容 。 该 内 容 仅 存 在 于 被 选中 的 给 定 选 项 卡 中 。 


每 个 ionTab 都 有 自己 的 浏览 历史 。 


用 法 


<ion-tab 
title="Tab!" 
icon="my-icon" 
href="#/tab/tab-link" 
on-select="onTabSelected()" 
on-deselect="onTabDeselected()"> 
</ion-tab> 


要 查看 标签 栏 完 整 运行 的 例子 ， 参 见 ionTabs 文档 。 


属性 类 型 详情 


title oe 选项 卡 的 标题 。 
href( 可 选 ) FEP 但 触 碰 的 时 候 ， 该 选项 卡 将 会 跳 转 的 的 链接 。 
icon( 可 选 ) 字符 串 oe 。 如 果 给 定 值 ， 它 将 成 为 jon-on 和 ion-off 的 默认 
icon-on(“T s “被 选中 标签 的 图 标 。 
选 ) 
icon-off(T ee 没 被 选中 标签 的 图 标 。 
选 ) 
aul 表达 式 选项 卡 上 的 徽章 (通常 是 一 个 数字 ) 。 
badge- — ; a EET m 
表达 式 先 项 卡 BE 的 样式 列 ， - o 
style(s) 达 式 选项 卡 上 微 章 的 样式 ( 例 ，tabs-positive ) 
on- 
select( 可 表达 式 选项 卡 被 选中 时 触发 。 
选 ) 
on- 
deselect( 可 RRA 选项 卡 取消 选中 时 触发 。 
选 ) 
ng-click( 可 通常 ， 点 击 时 选项 卡 会 被 选中 。 如 果 设 置 了 ng-Click ， ERT 
i) KAA 会 被 选中 。 你 可 以 用 $ionicTabsDelegate.select() 来 指定 切换 标 


inn_fn hh QA 
on-tap 84 


$ionicTabsDelegate 


授权 控制 ionTabs 指令 。 


该 方法 直接 调用 $ionicTabsDelegate 服 务 ， 控 制 所 有 ionTabs 指 令 。 用 $getByHandle 方 法 控制 
具体 的 ionTabs 实 例 。 


用 法 


<body ng-controller="MyCtrl"> 
<ion-tabs> 


<ion-tab title="Tab 1"> 

你 好 ， 标 签 1 | 

<button ng-click="selectTabwithIndex(1)"> 选 择 标签 2</button> 
</ion-tab> 
<ion-tab title="Tab 2"> 你 好 标签 2 ! </ion-tab> 


</ion-tabs> 
</body> 


function MyCtrl($scope, $ionicTabsDelegate) { 
$scope.selectTabwithIndex = function(index) { 
$ionicTabsDelegate.select(index); 
} 
} 


方法 
select(index, [shouldChangeHistory] ) 


选择 标签 来 匹配 给 定 的 索引 。 


参数 类 型 详情 
index 数值 选择 标签 的 索引 。 
此 选项 是 否 应 该 加 载 这 个 标签 的 浏览 历史 (如 果 
shouldChangeHistory( 可 ee 存在 ) ， 并 使 用 ， 或 仅 加 载 默 认 页 面 。 默 认为 


选 ) false。 提 示 : 如 果 一 个 ionNavview 在 选项 卡 里 ， 
你 可 能 需要 设置 它 为 true。 


selectedIndex( ) 


e 返回 : 数值 被 选中 标签 的 索引 ， 如 -1。 


$getByHandle (handle) 


参数 


3 


详情 


ax 


handle 字符 囊 


e 返回 : delegateInstance 一 个 授权 实例 用 delegate-handle 只 控制 iontabs 来 匹配 指定 多 


柄 。 


例如 : $ionicTabsDelegate.$getByHandle( 'my-handle').select(0); 


Side Menus ( 侧 栏 菜单 ) 


lonic 中 文 文档 


ion-side-menus 


授权 : $ionicSideMenuDelegate 


一 个 容器 元 素 的 侧 边 菜 单 和 主要 内 容 。 通 过 把 主要 内 容 区 域 从 一 边 拖 动 到 另 一 边 ， 来 让 左 便 
或 右 侧 的 侧 栏 菜单 进行 切换 。 


= Slide me 


Content 


要 了 解 更 多 Ai] 栏 菜单 的 信 息 ? 查看 文档 中 的 ionSideMenuContent 和 ionSideMenu ° 


用 法 


要 使 用 侧 栏 菜单 ， 添 加 一 个 父 元 素 <ion-side-menus> ， 一 个 中 间 内 容 


和 x n uw A 
<ion-side-menu-content> ? 和 一 个 或 更 多 <ion-side-menu> 指令 2 


ion-side-menus 
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<ion-side-menus> 
<!-- PARAS --> 
<ion-side-menu-content ng-controller="ContentController"> 
</ion-side-menu-content> 


<!-- ll --> 
<ion-side-menu side="left"> 
</ion-side-menu> 


<!-- 右 侧 菜单 --> 

<ion-side-menu side="right"> 

</ion-side-menu> 
</ion-side-menus> 


function ContentController($scope, $ionicSideMenuDelegate) { 
$scope.toggleLeft = function() { 
$ionicSideMenuDelegate.toggleLeft(); 
J; 
} 


API 


属性 类 型 详情 
delegate-handle( 可 Pe 该 句柄 用 来 标识 带 有 SionicSidemenudelegate 的 侧 栏 


让 g 


选 ) 菜单 。 


ion-side-menu-content 


隶属 于 ionsideMenus 


一 个 可 见 主体 内 容 的 容器 ， 同 级 的 一 个 或 多 个 ionsideMenu 指令 。 


用 法 


<ion-side-menu-content 
drag-content="true"> 
</ion-side-menu-content> 


查看 文档 中 的 ionsidemenus ， 来 了 解 一 个 完整 侧 栏 菜单 的 例子 。 


API 


属性 类 型 详情 


drag-content( 可 选 ) 布尔 什 内 容 是 否 可 被 拖 动 。 默 认为 true。 


ion-side-menu 


隶属 于 ionsideMenus 


一 个 侧 栏 菜单 的 容器 ， 同 级 的 一 个 ionsideMenucontent 指令 
用 法 


<ion-side-menu 
side="left" 
width="myWidthValue + 20" 
is-enabled="shouldLeftSideMenuBeEnabled{()"> 
</ion-side-menu> 


完整 侧 栏 菜单 的 例子 ， 参 加 文档 中 的 ionsideMenus ° 


API 


属性 类 型 详情 
side 字符 囊 侧 栏 菜单 当前 在 哪 一 边 。 可 选 的 值 有 : left’ 或 'right'。 
is-enabled( 可 选 ) 布尔 什 该 侧 栏 菜单 是 否 可 用 。 
width( 可 选 ) 数值 侧 栏 菜单 应 该 有 多 少 像素 的 宽度 。 默 认为 275。 


menu-toggle 


在 一 个 指定 的 侧 栏 中 切换 菜单 。 


用 法 
下 面 是 一 个 在 导航 栏 内 链接 的 例子 。 点 击 此 链接 会 自动 打开 指定 的 侧 栏 菜单 。 


<ion-view> 
<ion-nav-buttons side="left"> 
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button> 
</ion-nav-buttons> 


</ion-view> 


menu-close 
关闭 当前 打开 的 侧 栏 菜单 。 
用 法 


下 面 是 一 个 侧 栏 菜单 内 链接 的 例子 。 点 击 这 个 链接 会 自动 关闭 当前 打开 的 菜单 。 


<a menu-close href="#/home" class="item">® i </a> 


$ionicSideMenuDelegate 


授权 控制 ionSideMenus 指令 。 


该 方法 直接 触发 $ionicsideMenupelegate 服务 ， 来 控制 所 有 侧 栏 菜单 。 用 $getByHandle 方 法 
控制 特定 情况 下 的 ionSideMenus。 


用 法 


<body ng-controller="MainCtrl1"> 
<ion-side-menus> 
<ion-side-menu-content> 
Ae! 
<button ng-click="toggleLeftSideMenu( )"> 
切换 左 侧 侧 栏 菜单 
</button> 
</ion-side-menu-content> 
<ion-side-menu side="left"> 
左 侧 菜单 ! 
<ion-side-menu> 
</ion-side-menus> 
</body> 


function MainCtrl($scope, $ionicSideMenuDelegate) { 
$scope.toggleLeftSideMenu = function() { 
$ionicSideMenuDelegate.toggleLeft(); 
}; 
} 


方法 


toggleLeft([isOpen] ) 


切换 左 侧 侧 栏 菜单 (如 果 存 在 ) 。 


An 详情 
isOpen( 可 选 ) o LGA ARAM RS o Ri: 切换 菜单 。 


toggleRight ([isOpen] ) 


切换 右 侧 侧 栏 菜单 (如 果 存 在 ) 。 


saa Aw 详情 
isOpen( 可 选 ) EE 是 否 打 开 或 关闭 菜单 。 黑 认 : 切换 菜单 。 
getOpenRatio( ) 


获取 打开 菜单 内 容 超 出 菜单 宽度 的 比例 。 比 如 ， 一 个 宽度 为 100px 的 菜单 被 宽度 为 50px 以 50% 
的 比例 打开 ， 将 会 返回 一 个 比例 值 为 0.5。 


@ RE: 4a 0 表示 没 被 打开 ， 如 果 左 侧 菜单 处 于 已 打开 或 正在 打开 为 0 到 1， 如 果 右 侧 菜 
单 处 于 已 打开 或 正在 打开 为 0 到 -1 © 


isOpen() 


@ 返回 : 布尔 值 无 论 左 侧 或 右 侧 菜单 是 否 已 经 打开 。 


isOpenLeft() 


@ 返回 : 布尔 值 左 侧 菜单 是 否 已 经 打开 。 


isOpenRight() 


@ 返回 : 布尔 值 右 侧 菜单 是 否 已 经 打开 。 


canDragContent ([canDrag]) 


参数 类 型 详情 
canDrag( 可 选 ) 布尔 值 设置 是 否 可 以 拖 动 内 容 打 开 侧 栏 菜单 。 


e 返回 : 布尔 值 是 否 可 以 拖 动 内 容 打 开 侧 栏 菜 单 。 


$getByHandle (handle) 


参数 


党 


详情 


ye 


handle FAB 


e 返回 : delegateInstance 一 个 代表 性 的 实例 是 用 delegate-handle 只 控制 ionSideMenus 44 
令 来 匹配 指定 的 句柄 。 


例如 : $ionicSideMenuDelegate.$getByHandle('my-handle').toggleLeft(); 
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Navigation (导航 ) 


ion-nav-view 


See the Pen by lonic (@ionic) on CodePen. 

当 用 户 在 你 的 app 中 浏览 时 ，lonic 能 够 保持 检测 他 们 的 浏览 历史 。 通 过 了 解 他 们 的 浏览 历史 ， 

向 堪 或 向 右 滑动 时 可 以 正确 的 在 视图 间 转 换 ， 或 不 转换 。 一 个 额外 的 好 处 是 lonic 的 导航 系统 

具有 可 以 管理 多 个 历史 记录 的 能 力 。 

lonic 利 用 AngularUl 路 由 模块 ， 使 应 用 程序 接口 可 以 组 织 成 不 同 的 “状态 "。 例 如 Angular 的 核心 

$route 服 务 ， 利 用 URL 控 制 视图 。 然 而 ， ho a eA 大 的 状态 管理 ， 即 状 

aan 名 ， 瞪 套 ， 以 及 合并 视图 ， 人 允许 一 个 以 上 模板 呈现 在 同一 个 页 面 。 此 外 ， 每 个 状 
无 需 绑 定 到 一 个 URL， 并 且 数据 可 以 更 灵活 地 推送 到 每 个 状态 。 

用 ionNavView 指 令 在 你 的 app 中 浑 染 模版 。 每 个 模板 都 是 状态 的 一 部 分 。 状 态 通常 映射 到 一 

Url 上， 然后 用 angular-ui-router 定 义 程序 (查看 它们 的 文档 ， 记 下 用 ion-nav-view 替 换 Ui-view 

的 例子 ) 。 


用 法 
在 这 个 例子 中 ， 我 们 将 创建 一 个 应 用 程序 中 包含 不 同 状态 的 导航 视图 。 


要 做 到 这 一 点 ， 在 我 们 的 标签 中 ， 用 ionNavView 顶 层 指令 。 要 显示 一 个 页 眉 ， 我 们 利用 
我 们 通过 导航 堆栈 导航 时 ， 就 会 用 ionNavBar 指令 更 新 。 


你 可 以 在 navView 的 动画 属性 上 应 用 任何 动画 类 来 给 它 添 加 页 面 动 画 。 


建议 的 页 面 过 渡 : 'slide-left-right’, 'slide-left-right-ios7', 'slide-in-up' ° 


<ion-nav-bar></ion-nav-bar> 

<ion-nav-view animation="Sslide-left-right"> 
<!-- PAAR --> 

</ion-nav-view> 


接 下 来 ， 我 们 需要 设置 被 泻 染 的 状态 。 


var app = angular.module('myApp', ['ionic']); 
app.config(function($stateProvider) { 


$stateProvider 
.state('index', { 

Wiel G 

templateUrl: '‘home.html' 
}) 


.state('music', { 
url: '/music', 
templateUrl: 'music.html' 
H); 
}); 


然后 在 app 启 动 时 ，$stateProvider 就 会 检查 url|， 检 查 它 的 索引 匹配 状态 ， 然 后 尝试 将 
home.html 加 载 到 &lt;ion-nav-view&gt; 内 。 


页 面 由 指定 的 URL 加 载 。 在 Angular 中 有 一 个 简单 的 方式 就 是 把 它们 直接 放 到 你 的 HTML 文 
件 ， 并 用 ait;script type="text/ng-template"&gt; 语法 。 因 此 ， 这 是 一 种 把 home.html 载 入 到 
app 中 的 一 种 方式 : 


<script id="home" type="text/ng-template"> 
<!-- ion-view 的 标题 会 在 导航 栏 显 示 --> 
<ion-view title="'Home'"> 
<ion-content ng-controller="HomeCtr1"> 
<!-- 页 面 的 内 容 --> 
<a href="#/music"> 跳 转 到 音乐 页 面 ! 1!</a> 
</ion-content> 
</ion-view> 
</script> 


这 么 做 那 也 是 极 好 的 ， 因 为 缓存 了 模板 ， 加 载 速度 非常 快 ， 不 必 从 网 络 上 再 获取 。 


请 访问 AngularUl 路 由 文档 了 解 详情 。 下 面 是 一 个 很 棒 的 AngularUl 路 由 视频 ， 可 以 帮助 了 解 
它 的 所 有 运作 情况 : 


属性 类 型 详情 
name(T 一 个 视图 的 名 字 。 这 个 名 字 应 该 是 在 相同 的 状态 下 其 他 视图 中 唯 
、 字符 串 一 的 。 你 可 以 在 不 同 的 状态 中 有 相同 名 称 的 视图 。 谷 了 解 详 细 信 
息 ， 查 看 Ui-router 的 ui-view 文档 。 


ion-view 


隶属 于 ionNavView 


一 个 内 容 的 容器 ， 用 来 告诉 一 个 当前 视图 的 父 ionNavBar ° 


用 法 
下 面 是 一 个 带 有 “我 的 页 面 "标题 的 导航 栏 载 入 页 面 的 例子 。 


<ion-nav-bar></ion-nav-bar> 
<ion-nav-view class="slide-left-right"> 
<ion-view title=" 4 7 "> 
<ion-content> 
你 好 ! 
</ion-content> 
</ion-view> 
</ion-nav-view> 


API 


属性 类 型 详情 
title( 可 选 ) eae 显示 在 父 ionNavBar 的 标题 。 
hide-back-button( 可 选 ) 布尔 什 默认 情况 下 ， 是 否 在 父 ionNavBar 隐藏 后 退 按钮 。 
hide-nav-bar( 可 选 ) 布尔 值 默认 情况 下 ， 是 否 隐藏 父 ionNavBar ° 


1ion-nav-bar 


授权 : $ionicNavBarDelegate 

如 果 我 们 有 一 个 ionNavview 指令 ， 我 们 也 可 以 创建 一 个 &1t;ion-nav-bar&gt; ， 它 会 创建 一 个 
顶部 工具 栏 ， 当 程序 状态 改变 时 更 新 。 

我 们 在 里 面 放 入 一 个 ionNavBackButton 来 添加 一 个 后 退 按钮 。 

用 ionNavButtons 根据 当前 可 用 的 视图 添加 按钮 。 


在 一 个 元 素 上 指定 一 个 动画 类 ， 来 启用 更 换 标 题 的 动画 (建议: 'nav-title-slide-ios7') 


用 法 


<body ng-app="starter"> 
<!-- 当 我 们 浏览 时 ， 寻 航 栏 会 随 之 更 新 。 --> 
<ion-nav-bar class="bar-positive nav-title-slide-ios7"> 
</ion-nav-bar> 


<!-- 初始 化 时 泻 染 视图 模板 --> 


<ion-nav-view></ion-nav-view> 
</body> 


API 


‘alia 类 型 详情 
delegate- = 、 E 7 _ 
i THe A e 示 识 此 导航 栏 。 
handle( 可 选 ) TAT 该 句柄 用 $ionicNavBarDelegate ART 导航 本 
0 ， 、 导航 栏 标题 对 齐 的 位 置 。 己 a 0 Ho Ue i Tos 
align-title( 可 选 ) ape ”号 航 栏 标 题 对 齐 的 位 置 。 可 用 : ‘left, ‘right’, ‘center 


默认 为 'center'。 


其 他 用 法 


除 此 之 外 ， 你 可 以 将 ion-nav-bar 放 到 每 个 单独 视图 的 ion-vieW 元 素 里 面 。 它 允许 你 把 整个 导航 
栏 ， 而 不 仅 是 它 的 内 容 ， 改 变 每 个 视图 的 过 渡 。 


这 类 似 于 把 header 栏 眶 入 到 你 的 ion-view 中 ， 此 外 它 有 导航 栏 的 所 有 功能 。 


如 果 你 这 样 做 2 只 需 把 导航 按钮 放 在 导航 栏 里 面 ; 而 不 需要 用 &lt;ion-nav-buttons&gt; ° 


<ion-nav-bar class="bar-positive"> 
<ion-nav-back-button> 
返回 
</ion-nav-back-button> 
<div class="buttons right-buttons"> 
<button class="button"> 
右 侧 按钮 
</button> 
</div> 
</ion-nav-bar> 
<ion-view title=" 我 的 标题 "> 
</ion-view> 


改进 该 文档 


ion-nav-buttons 


隶属 于 ionNavView 
在 ionview 内 的 ionNavBar 上 用 ionNavButtons 设 置 按钮 。 


你 设置 的 任何 按钮 都 将 被 放置 在 导航 栏 的 相应 位 置 ， 当 用 户 离 开 父 视图 时 会 被 销毁 。 


用 法 


<ion-nav-bar> 
</ion-nav-bar> 
<ion-nav-view> 
<ion-view> 
<ion-nav-buttons side="left"> 
<button class="button" ng-click="doSomething()"> 
我 是 一 个 在 导航 栏 左 侧 的 按钮 ! 
</button> 
</ion-nav-buttons> 
<ion-content> 
这 里 是 一 些 内 容 ! 
</ion-content> 
</ion-view> 
</ion-nav-view> 


ion-nav-back-button 


隶属 于 ionNavBar 
在 一 个 ionNavBar 中 创建 一 个 按钮 5 
当 用 户 在 当前 导航 堆栈 能 够 后 退 时 ， 将 显示 后 退 按钮 。 


默认 情况 下 ， 当 点 击 后 退 按钮 时 。 如 果 你 想 了 解 更 高 级 的 行为 ， 请 参阅 下 面 的 例子 。 


用 法 
默认 按钮 动作 : 


<ion-nav-bar> 
<ion-nav-back-button class="button-clear"> 
<i class="ion-arrow-left-c"></i> 后 退 
</ion-nav-back-button> 
</ion-nav-bar> 


自 定义 点 击 动作 ， 用 sionicNavBarDelegate : 


<ion-nav-bar ng-controller="MyCtr1l"> 
<ion-nav-back-button class="button-clear" 
ng-click="canGoBack && goBack()"> 
<i class="ion-arrow-left-c"></i> 后 退 
</ion-nav-back-button> 
</ion-nav-bar> 


function MyCtrl($scope, $ionicNavBarDelegate) { 
$scope.goBack = function() { 
$ionicNavBarDelegate.back(); 
J; 
} 


在 后 退 按钮 上 显示 上 一 个 标题 ， 也 用 $ionicNavBarDelegate ° 


<ion-nav-bar ng-controller="MyCtrl"> 
<ion-nav-back-button class="button-icon"> 
<i class="icon ion-arrow-left-c"></i>{{getPreviousTitle() || 'Back'}} 
</ion-nav-back-button> 
</ion-nav-bar> 


function MyCtrl($scope, $ionicNavBarDelegate) { 
$scope.getPreviousTitle = function() { 
return $ionicNavBarDelegate.getPreviousTitle(); 
J; 
} 
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nav-clear 


nav-clear 一 个 当 点 击 视图 上 的 元 素 时 用 到 的 属性 指令 ， 比 如 一 个 &ltia hrefagt; 或 者 一 个 


&lt;button ui-sref&gt; ° 


当 点 击 时 ，nav-clear 将 会 导致 给 定 的 元 素 ， 禁 止 下 一 个 视图 的 转换 。 这 个 指令 很 有 用 ， 上 比 
如 ， 侧 栏 菜单 内 的 链接 。 


用 法 


下 面 是 一 个 侧 栏 菜单 内 添加 了 nav-clear 指 令 的 一 个 链接 。 点 击 该 链接 将 禁用 视图 间 正 常 进 行 
的 任何 动画 。 


<a nav-clear menu-close href="#/home" class="item"># i </a> 


$ionicNavBarDelegate 


授权 控制 ionNavBar 指令 。 


用 法 


<body ng-controller="MyCtrl"> 
<ion-nav-bar> 
<button ng-click="setNavTitle('#%')"> 
KERMA |! 
</button> 
</ion-nav-bar> 
</body> 


function MyCtrl($scope, $ionicNavBarDelegate) { 
$scope.setNavTitle = function(title) { 
$ionicNavBarDelegate.setTitle(title); 
} 
} 


方法 


back( [event ] ) 


在 浏览 历史 中 后 退 。 


参数 类 型 详情 
event( 可 选 ) DOMEvent 事件 对 象 (如 来 自 点 击 事件 ) 


align( [direction] ) 


带 有 按钮 的 标题 对 齐 到 指定 的 方向 。 


参数 类 型 详情 
direction( 可 a 标题 文字 对 齐 的 方向 。 可 用 : 'left', 'right', 'center' ° 默认 : 
选 ) ‘center' ° 


showBackButton( [show] ) 


设置 或 获取 ionNavBackButton 是 否 显示 〈 如 果 它 存在 的 话 ) o 


参数 类 型 详情 


show( 可 选 ) A ir 后 退 按钮 是 否 显示 。 


showBar (show) 
设置 或 获取 ionNavBar EBER ° 


A za 详情 


show 布尔 值 导航 栏 是 否 显 示 。 


e 返回 : 布尔 值 导航 栏 是 否 显示 。 


setTitle(title) 


为 ionNavBar 设置 标题 。 


sii 关 型 详情 

title Se 显示 新 标题 。 
changeTitle(title, direction) 
改变 标题 ， 指 定 的 一 个 过 渡 的 方向 ， 显 示 新 标题 ， 隐 藏 日 标 题 。 

参数 类 型 详情 
title 字符 囊 显示 新 标题 。 
direction 字符 串 过 渡 显 示 新 标题 的 方向 。 可 用 : 'forward', 'back' 。 
getTitle() 
e 返回 : Fee 获取 当前 导航 栏 的 标题 


getPreviousTitle() 


o 返回 : 字符 囊 导航 栏 的 上 一 个 标题 。 


$getByHandle (handle) 


参数 


He 


详情 


$k 


handle A 
e 返回 : delegateInstance 用 给 定 的 delegate-handle 多 柄 只 控制 导航 栏 的 一 个 授权 实例 。 


例如 : $ionicNavBarDelegate.$getByHandle('myHandle').setTitle('newTitle' ) 


Lists (列表 ) 


ion-list 


授权 : $ionicListDelegate 


列表 是 一 个 应 用 广泛 在 几乎 所 有 移动 app 中 的 界面 元 素 ， 可 以 包含 的 内 容 范 围 从 基本 文字 到 按 
钮 ， 开 关 ， 图 标 和 缩 略 图 在 内 所 有 内 容 。 


包含 列表 项 的 列表 以 及 列表 项 自身 都 可 以 是 任何 的 HTML 元 素 。 容 器 元 素 需 要 list 类 ， 并 且 
每 个 列表 项 需要 item 类 。 


然而 ， 使 用 ionList 和 ionltem 可 以 很 容易 的 支持 各 种 交互 方式 ， 比 如 ， 滑 动 编辑 ， 拖 动 排序 ， 
以 及 删除 项 。 


相关 阅读 : ionItem ， ionOptionButton ionReorderButton ， ionDeleteButton 


list CSS documentation . 


用 法 


基本 用 法 : 


<ion-list> 
<ion-item ng-repeat="item in items"> 
Hello, {{item}}! 
</ion-item> 
</ion-list> 


高 级 用 法 : MRA > MPa SHU > a 


<ion-list ng-controller="MyCtr1" 
show-delete="shouldShowDelete" 
show- reorder="shouldShowReorder" 
can-swipe="listCanSwipe"> 
<ion-item ng-repeat="item in items" 
class="item-thumbnail-left"> 


<img ng-src="{{item.img}}"> 

<h2>{{item. title}}</h2> 

<p>{{item.description}}</p> 

<ion-option-button class="button-positive" 
ng-click="Share(item)"> 

</ion-option-button> 

<ion-option-button class="button-info" 
ng-click="edit(item)"> 

编辑 

</ion-option-button> 

<ion-delete-button class="ion-minus-circled" 
ng-click="items.splice($index, 1)"> 

</ion-delete-button> 

<ion-reorder-button class="ion-navicon" 
on-reorder="reorderItem(item, $fromIndex, $toIndex)"> 

</ion-reorder -button> 


</ion-item> 
</ion-list> 


API 


属性 类 型 详情 
delegate-handle( 可 选 ) 字符 囊 该 句柄 定义 带 有 sionicListDelegate 的 列表 。 
show-delete( 可 选 ) 布尔 什 列表 项 的 删除 按钮 当前 是 显示 还 是 隐藏 。 
show-reorder( 可 选 ) 布尔 什 列表 项 的 排序 按钮 当前 是 显示 还 是 隐藏 。 
can-swipe( 可 选 ) 布尔 值 列表 项 是 否 被 允许 滑动 显示 选项 按钮 。 默 认 : true。 


ion-item 


隶属 于 ionList 


用 法 


<ion-list> 
<ion-item>tk4F !</ion-item> 
</ion-list> 


ion-delete-button 


隶属 于 IonItem 


用 法 


<ion-list show-delete="ShouldShowDelete"> 
<ion-item> 
<ion-delete-button class="ion-minus-circled"></ion-delete-button> 
Hello, ARR! 
</ion-item> 
</ion-list> 
<ion-toggle ng-model="shouldShowDelete"> 
显示 删除 3 
</ion-toggle> 


ion-reorder-button 


隶属 于 IonItem 


用 法 


<ion-list ng-controller="MyCtr1"> 
<ion-item ng-repeat="item in items"> 
项 
<ion-reorder-button class="ion-navicon" 
on-reorder="moveltem(item, $fromIndex, $toIndex)"> 
</ion-reorder> 
</ion-item> 
</ion-list> 


function MyCtrl($scope) { 

$scope.items = [1, 2, 3, 4]; 

$scope.moveItem = function(item, fromIndex, toIndex) { 
// 把 该 项 移动 到 数组 中 
$scope.items.splice(fromIndex, 1); 
$scope.items.splice(toIndex, 0, item); 
}; 
} 


属性 类 型 详情 


on-reorder( 可 当 一 项 被 重新 排序 时 调用 表达 式 。 给 定 参数 : $fromindex, 
选 ) $tolndex ° 


ion-option-button 


隶属 于 IonItem 


用 法 


<ion-list> 
<ion-item> 
我 喜欢 小 猫 ! 
<ion-option-button class="button-positive"> 分 享 </ion-option-button> 
<ion-option-button class="button-assertive"> 编 辑 </ion-option-button> 
</ion-item> 
</ion-list> 


collection-repeat 


collection-repeat 是 一 个 允许 你 》 ia 染 数 千 项 列表 z FH LEGA ELETA 减弱 的 指令 。 


示例 : 
该 指令 只 泻 当 屏幕 可 见 区 域 的 列表 。 因 此 如 果 你 有 1000 条 列表 项 目 ， 只 有 10 条 呈现 在 你 的 屏 
幕 上 ，collection-repeat 只 会 泻 染 当 前 滚动 位 置 的 十 条 DOM 。 


当 使 用 collection-repeat 时 ， 请 记 住 一 下 几 点 : 


1. 
2. 


collection-repeat 处 理 的 数据 必须 是 一 个 数组 。 
你 必须 明确 的 告诉 该 指令 ， 在 DOM 中 你 的 项 使 用 是 多 大 的 指令 属性 。 人 允许 像素 值 或 百 分 


A (FX) ° 


.被 泻 业 的 元 素 将 被 绝对 定位 : 确保 你 的 CSS 正 常 运行 ( 见 下 文 ) 。 
.保持 重复 的 HTML 元 素 尽 可 能 的 简单 。 当 用 户 向 下 滚动 时 ， 元 素 会 被 延迟 演 染 。 因 此 ， 你 


的 元 素 越 复杂 ， 在 用 户 滚动 的 过 程 中 按 需 编译 就 越 会 导致 “ 卡 屏 ”。 
在 屏幕 的 每 一 行 ， 你 泻 染 的 元 素 越 多 ， 滚 动 就 越 可 能 变 慢 。 建 议 列表 元 素 的 栅 格 保持 在 3 


列 以 内 。 例 如 ， 如 果 你 有 一 个 图 库 只 需 把 它们 的 宽度 设置 为 33% © 

每 个 collection-repeat 列 表 都 会 占据 它 的 所 有 父 滚动 视图 的 空间 。 如 果 你 想 在 一 个 页 面 上 
有 多 个 列表 ， 就 把 每 个 列表 放 在 它 自己 的 ionScroll 容 器 内 。 

你 不 应 该 在 带 有 collection-repeat 列 表 的 ion-content 或 ion-scroll 元 素 上 使 用 ng-show 和 
ng-hide 指 令 。 ng-show 和 ng-hide 在 内 容 样式 上 应 用 css 规 则 display: none ， 导 致 可 
见 滚动 视图 内 容 的 宽度 和 高 度 为 0。 因 此 ，collection-repeat 会 泻 娄 刚刚 被 取消 隐藏 的 元 


基本 用 法 (单行 项 ) 


注意 两 点 : 我 们 用 ng-style 来 设置 项 的 高 度 以 匹配 我 们 的 重复 项 的 高 度 。 此 外 ， 我 们 添加 了 
一 个 css 规 则 使 我 们 的 item 拉 伸 以 适应 全 屏 (因为 它 是 绝对 定位 的 ) o 


<ion-content ng-controller="ContentCtr1"> 
<div class="list"> 
<div class="item my-item" 
collection-repeat="item in items" 
collection-item-width="'100%'" 
collection-item-height="getItemHeight(item, $index)" 
ng-style="{height: getItemHeight(item, $index)}"> 
{{item}} 
</div> 
</div> 
</div> 


function ContentCtrl($scope) { 
$scope.items = []; 
for (var i = 0; i < 1000; i++) { 
$scope.items.push('Item ' + i); 


} 


$scope.getItemHeight = function(item, index) { 
// 使 索引 项 平均 都 有 10pX 高 ， 例 如 

return (index % 2) === 0 ? 50 : 60; 

J; 
} 


.my-item { 
left: 0; 
right: 0; 

} 


栅 格 用 法 (每 行 三 项 ) 


<ion-content> 


<div class="item item-avatar my-image-item" 


collection-repeat="image in images" 
collection-item-width="'33%'" 
collection-item-height="'33%'"> 
<img ng-src=""> 


</div> 


</ion-content> 


.my-image-item { 


height: 33%; 
width: 33%; 
} 


API 


collection-repeat 


表达 式 


该 表达 式 表 明 如 何 枚 举 一 个 集合 。 当 前 支持 一 下 格式 : 


变量 表达 式 一 其 中 变量 是 用 户 定义 的 循环 变量 ， 表达 式 是 一 个 给 出 了 集合 进行 枚 举 的 范围 


比如 : album in artist.albums ° 


通过 tracking_expression 跟 踪 表 达 式 变量 一 你 也 可 以 提供 一 个 可 选 的 跟踪 功能 可 以 将 集合 中 
的 对 象 与 DOM 元 素 关 联 起 来 。 如 果 没 有 指定 跟踪 功能 ，collection-repeat 通 过 在 集合 中 标 
识 来 关联 元 素 。 用 一 个 以 上 的 跟踪 功能 来 解决 同一 个 问题 是 错误 的 。 (这 意味 着 两 个 不 
同 的 对 象 被 映射 到 同一 个 DOM 元 素 上 ， 那 样 是 不 行 的 。) 过 滤器 应 被 应 用 到 表达 式 ， 特 
定 跟踪 表达 式 之 前 。 


比如 : item in items 等 同 于 'item in items track by $id(item)'° 这 意味 着 DOM 元 素 会 被 数 
组 中 标识 的 项 关联 。 


比如 : item in items track by $id(item) 。 在 数组 的 每 一 项 中 一 个 内 置 的 $id() BRAT 
以 被 用 来 分 配 一 个 唯一 的 gs$hashkey 属性 。 然 后 这 个 属性 作为 一 个 关联 DOM 元 素 的 关 
键 ， 通 过 标识 数组 中 的 相应 的 项 。 在 数组 中 移动 同一 个 项 与 在 DOM 中 移动 DOM 元 素 的 方 
式 一 样 。 


比如 : 当 数 据 来 自 数据 库 时 ， item in items track by item.id 是 一 个 典型 的 模式 。 在 这 种 
情况 下 ， 对 象 标识 并 不 重要 。 重 要 两 个 对 象 的 id 属性 相同 ， 那 么 它们 被 认为 是 等 效 的 。 


比如 : item in items &#124; filter:searchText track by item.id 是 一 种 模式 ， 可 用 来 在 
项 上 应 用 一 个 过 滤器 ， 与 一 个 跟踪 表达 式 相 结合 。 


collection-item-width 

表达 式 

重复 元 素 的 宽度 。 可 以 是 一 个 数字 (以 像素 为 单位 ) 或 一 个 百 分 百 。 
collection-item-height 


表达 式 


重复 元 素 的 高 度 。 可 以 是 一 个 数字 (以 像素 为 单位 ) 或 一 个 百 分 百 。 


$ionicListDelegate 


授权 控制 ionList 指令 。 


当 $ionicListDelegate 服 务 控制 所 有 列表 时 ， 会 直接 调用 该 方法 。 用 $getByHandle 方 法 控制 特 
定 的 ionList 实 例 。 


用 法 


<ion-content ng-controller="MyCtrl"> 
<button class="button" ng-click="ShowDeleteButtons()"></button> 
<ion-list> 
<ion-item ng-repeat="i in items">> 
Hello, {{i}}! 
<ion-delete-button class="ion-minus-circled"></ion-delete-button> 
</ion-item> 
</ion-list> 
</ion-content> 


function MyCtrl($scope, $ionicListDelegate) { 
$scope.showDeleteButtons = function() { 
$ionicListDelegate.showDelete(true); 
J; 
} 


方法 


showReorder ([showReorder ] ) 


参数 类 型 详情 
showReorder( 可 选 ) 布尔 值 设置 是 否 显示 该 列表 的 排序 按钮 。 


e 返回 : 布尔 值 排序 按钮 是 否 显 示 。 


showDelete( [showReorder]) 


参数 类 型 详情 
showReorder( 可 选 ) 布尔 什 设置 是 否 显示 该 列表 的 删除 按钮 。 


e 返回 : 布尔 值 删除 按钮 是 否 显示 。 


CcanSwipelItems([showReorder | ) 


参数 类 型 详情 
showReorder( 可 选 ) 布尔 什 设置 该 列表 是 否 可 以 切换 显示 选项 按钮 。 


@ 返回 : 布尔 值 该 列表 是 否 可 以 切换 显示 选项 按钮 。 


closeOptionButtons() 


关闭 所 有 被 打开 的 列表 选项 按钮 。 


$getByHandle (handle) 
参数 选项 详情 
handle TAE 


e 返回 : delegateInstance 一 个 只 控制 带 有 delegate-handle 匹配 给 定 句 柄 的 ionList 授权 
实例 。 


例如 : $ionicListDelegate .$getByHandle('my-handle' ).showReorder (true); 


Form Inputs (表单 ) 


ion-checkbox 


ion-checkbox 和 HTML 复 选 框 相 比 没什么 不 同 ， 除 了 它 的 样式 不 同 。 


复 选 框 的 行为 类 似 于 任何 AngularJS 复 选 框 。 


Usage 


<ion-checkbox ng-model="isChecked"> 复 选 框 标签 </ion-checkbox> 


ion-radio 


radio 指 令 和 HTMLradio 相 比 没什么 不 同 ， 除 了 它 的 样式 不 一 样 。 


Radio 的 行为 类 似 于 任何 AngularJS radio。 


用 法 


<ion-radio ng-model="choice" ng-value="A">Choose A</ion-radio> 
<ion-radio ng-model="choice" ng-value="B">Choose B</ion-radio> 
<ion-radio ng-model="choice" ng-value="C">Choose C</ion-radio> 


ion-toggle 


一 个 切换 效果 就 是 一 个 绑 定 一 个 给 定 布尔 值 模型 的 开关 动画 。 
允许 拖 动 开关 的 按钮 。 


切换 的 行为 类 似 与 任何 AngularJS 复 选 框 。 


用 法 


下 面 是 被 连接 到 airplaneMode 模块 并 且 关 联 toggle-calm CSS 类 内 部 元 件 的 一 个 切换 指令 的 
例子 。 


<ion-toggle ng-model="airplaneMode" toggle-class="toggle-calm">Airplane Mode</ion-toggle> 


Ei = — REl 








API 


属性 类 型 详情 


toggle-class( 可 选 ) EPRS 通过 该 指令 在 内 部 设置 CSS 类 创建 label.toggle LK ° 





Slide Box (滑动 框 ) 
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ion-slide-box 


授权 : $ionicSlideBoxDelegate 


滑动 框 是 一 个 包含 多 页 容器 的 组 件 ， 每 页 滑动 或 拖 动 切换 : 





<ion-slide-box> 
<ion-slide> 
<div class="box blue"><h1>BLUE</h1></div> 
</ion-slide> 
<ion-slide> 
<div class="box yellow"><h1>YELLOW</h1></div> 
</ion-slide> 
<ion-slide on-slide-changed="slideHasChanged(index)"> 
<div class="box pink"><h1>PINK</h1></div> 
</ion-slide> 
</ion-slide-box> 


API 


ion-slide-box 
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属性 类 型 详情 


delegate- 


handle( 可 选 ) 字符 串 该 句柄 用 $ionicslideBoxDelegate 来 标识 这 个 滑动 框 。 


does- 


、 布尔 值 VA oH AE IP oh o 
continue( 可 选 ) 滑动 框 是 否 自 动 滑 马 


slide-interval( 可 FA SS BAY HAG a (如 果 继 续 则 为 true) ° RUX 


数字 

选 ) a 4000 。 
show-pager(T | ynt | 滑动 框 的 页 面 是 否 显示 。 
it) 
pager-click( 可 a 当 点 击 页 面 时 ， 触 发 该 表达 式 (如 果 shou-pager 为 
选 ) true) 。 传 递 一 个 ' 索 引 ' 变 量 。 
on-slide- nek 

5 表达 式 d 日 由 A 工 一 个 ' a 
T 达 当 滑 动 时 ， 触 发 该 表达 式 。 传 递 索引 ' 变 量 


active-slide ("T 


l 表达 式 。 ”将 模型 绑 定 到 当前 滑动 框 。 
选 ) 


$ionicSlideBoxDelegate 


授权 控制 ionslideBox 指令 


当 $ionicSlideBoxDelegate 服 务 控制 所 有 滑动 框 时 触发 该 方法 。 用 $getByHandle 方 法 控制 特 
定 的 滑动 框 实例 。 


用 法 


<body ng-controller="MyCtr1"> 
<ion-slide-box> 
<ion-slide> 
<div class="box blue"> 
<button ng-click="nextSlide()">F—‘* 3k !</button> 
</div> 
</ion-slide> 
<ion-slide> 
<div class="box red"> 
tk 2! 
</div> 
</ion-slide> 
</ion-slide-box> 
</body> 


function MyCtrl($scope, $ionicSlideBoxDelegate) { 
$scope.nextSlide = function() { 
$ionicSlideBoxDelegate.next(); 
} 
} 


方法 
update() 

更 新 滑动 框 (例如 ， 用 带 有 ng-repeat 的 Angular， 调 整 它 里 面 的 元 素 ) 。 
slide(to, [speed] ) 


参数 类 型 详情 
to 数字 滑动 的 索引 。 


speed( 可 选 ) 数字 滑动 切换 的 毫秒 数 。 


enableSlide([shouldEnable ] ) 


参数 类 型 详情 
shouldEnable( 可 选 ) 布尔 什 是 否 启 用 滑动 框 的 滑动 功能 。 


e AE: 布尔 值 是 否 启 用 滑动 。 


previous() 


跳 转 到 上 一 个 滑 块 。 如 果 在 开始 滑 块 ， 就 循环 。 


next () 


跳 转 到 下 一 个 滑 块 。 如 果 在 结尾 就 循环 。 


stop() 


‘PILI o HAVEN AASARE A BNAKE HA o 


currentIndex() 


。 返回 : 当前 滑 块 的 索引 数值 。 


slidesCount () 


o 返回 : 当前 滑 块 的 数目 。 


$getByHandle (handle) 


参数 


3 


详情 


$k 


handle 字符 串 


e 返回 : delegateInstance 一 个 只 控制 带 有 delegate-handle 的 ionSlideBox 指令 的 授权 实 
例 来 匹配 给 定 句柄 。 


例如 : $ionicSlideBoxDelegate.$getByHandle('my-handle').stop(); 


Modal ( 模型 ) 


$SionicModal 


模型 是 一 个 内 容 面 板 ， 可 以 临时 越过 用 户 的 主 视图 。 通 常用 于 选择 或 编辑 一 个 项 。 注 意 ， 你 
需要 把 模型 的 内 容 放 入 一 个 带 有 modal 类 的 div 内 。 


<script id="my-modal.html" type="text/ng-template"> 
<div class="modal"> 
<ion-header -bar> 
<h1 class="title"> 我 的 模型 标题 </h1> 
</ion-header-bar> 
<ion-content> 
Hello! 
</ion-content> 
</div> 
</script> 


angular.module('testApp', ['ionic']) 
.controller('MyController', function($scope, $ionicModal) { 
$ionicModal.fromTemplateUr1l('modal.html', { 
scope: $scope, 
animation: 'slide-in-up' 
}).then(function(modal) { 
$scope.modal = modal; 
3); 
$scope.openModal = function() { 
$scope.modal.show(); 
}; 
$scope.closeModal = function() { 
$scope.modal.hide(); 


}; 

// 当 我 们 用 到 模型 时 ， 清 除 它 ! 

$scope.$on('$destroy', function() { 
$scope.modal.remove(); 


3); 

// 当 隐 藏 的 模型 时 执行 动作 

$scope.$on('modal.hide', function() { 
// 执行 动作 


3); 
// 当 移动 模型 时 执行 动作 
$scope.$on('modal.removed', function() { 
// 执行 动作 
3); 
3); 


方法 


fromTemplate(templateString, options) 


参数 类 型 详情 
templateString FE 模板 的 字符 串 作 为 模型 的 内 容 。 
options HR 传递 ionicModal#initialize 方 法 的 选项 。 


e 返回 : 对 象 一 个 ionicModal 控制 器 的 实例 。 


fromTemplateUrl(templateUrl, options) 


参数 类 型 详情 
templateUnl PA 载 入 模板 的 url o 
options at R 34 it ionicModal#initialize 7 141} 2% Ht FZ ° 


e 返回 : promise 用 ionicmodal 控制 器 的 一 个 实例 加 以 解决 的 承诺 。 


ionicModal 


由 $ionicModal 服务 实例 化 。 
提示 : 当 你 完成 每 个 模块 清除 时 ， 确 保 调 用 remove() 方 法 ， 以 避免 内 存 泄 漏 。 


注意 : 一 个 模块 从 它 的 初始 范围 广播 出 'modal.shown' 和 'modal.hidden' ， 把 自身 作为 一 个 参 
数 来 传递 。 

方法 

initialize( 7 x) 


创建 一 个 新 的 模型 控制 器 示例 。 


参数 类 型 详情 
options at 选项 对 象 
一 个 选项 对 象 具 有 一 下 属性 


e {object=} 范围 子 类 的 范围 。 默 认 : 创建 一 个 $rootScope 子 类 。 

e {string=} 动画 带 有 显示 或 隐藏 的 动画 。 默 认 : 'slide-in-up' 

e {boolean=} 第 一 个 输入 框 获取 焦点 当 显 示 时 ， 模 型 的 第 一 个 输入 元 素 是 否 自动 获取 焦点 。 
默认 : false。 

e {boolean=} backdropclickToclose 点 击 背 景 时 是 否 关 闭 模 型 。 上 默认 : true e 


show() 


@ 返回 : ge 当 模 型 完成 动画 进入 时 ， 解 决 的 一 种 凭证 。 


hide() 


隐藏 模 型 实例 


o 返回 : gi 当 模 型 完成 动画 退出 时 ， 解 决 的 一 种 凭证 。 


remove ( ) 


从 DOM 中 移动 并 清除 这 个 模型 实例 。 


@ 返回 : git 当 模 型 完成 动画 退出 时 ， 解 决 的 一 种 凭证 。 


isShown() 


Action Sheet (操作 表 ) 


SionicActionSheet 
该 操作 表 是 一 个 向 上 滑动 的 面板 ， 用 户 可 以 从 一 系列 选项 中 选择 。 危 险 的 操作 以 红色 突出 显 


A 
有 简便 的 方式 可 以 取消 操作 表 ， 例 如 点 击 背 景 ， 在 桌面 电脑 测试 时 ， 按 ESC 键 也 可 以 。 


用 法 


在 你 的 代码 中 触发 一 个 操作 表 ， 在 angular 控 制 器 中 用 $ionicActionSheet 服 务 : 


angular .module('mySuperApp', ['ionic']) 
.controller(function($scope, $ionicActionSheet) { 


// 点 击 按钮 触发 ， 或 一 些 其 他 的 触发 条 件 
$scope.show = function() { 


// 显示 操作 表 
$ionicActionSheet . show( { 
buttons: [ 
{ text: '<b>Share</b> This' }, 
{ text: 'Move' }, 
], 
destructiveText: 'Delete', 
titleText: 'Modify your album', 
cancelText: 'Cancel', 
buttonClicked: function(index) { 
return true; 
} 
}); 


方法 
show(opts) 


加 载 并 返回 一 个 新 的 操作 表 。 
针对 操作 表 的 一 种 新 的 隔离 范围 将 被 创建 ， 新 的 元 素 会 附加 进 body 内 。 


= 


参数 类 型 详情 


opts 对 象 操作 表 的 选项 。 


© [Object] èa 显示 的 按钮 。 每 个 按钮 都 是 一 个 带 有 文字 的 对 象 。 
© {string} 标题 文字 在 操作 表 上 显示 的 标题 。 

© {string} 取消 文字 操作 表 上 ' 取 消 ' 按 钮 的 文字 。 

e {string=} 警告 文字 操作 表 上 ' 警 告 ' 的 文字 。 

e {function=} 取消 当 点 击 取 消 按钮 或 点 击 背 景 时 触发 。 


e {function=} ”点击 按 钮 ” 当 非 警告 按钮 之 一 被 点 击 时 触发 ， 带 有 索引 的 按钮 被 点 击 和 按钮 


对 象 。 返 回 true 则 关闭 操作 表 ， 或 false 则 保持 打开 。 


e {function=} ”点 击 警 告 按钮 ” 当 警 告 按钮 被 点 击 时 触发 。 返 回 true 则 关闭 操作 表 ， 或 false 则 


保持 打开 。 


Popup (弹出 窗口 ) 


$ionicPopup 


See the Pen by lonic (@ionic) on CodePen. 
lonic 弹 窗 服务 允许 程序 创建 、 显 示 弹 出 窗口 ， 需 要 用 户 继续 响应 。 


弹 窗 系统 支持 更 多 灵活 的 构建 alert() ? prompt() 和 confirm() 功能 版 本 ， 以 及 用 户 习 惯 ， 
除了 允许 查看 完全 自 定义 内 容 的 的 弹 窗 。 


用 法 


一 些 基 本 的 例子 ， 查 看 下 文 了 解 所 有 可 用 的 选项 详情 。 


angular .module('mySuperApp', ['ionic']) 
.controller(function($scope, $ionicPopup, $timeout) { 


// 触发 一 个 按钮 点 击 ， 或 一 些 其 他 目标 
$scope.showPopup = function() { 
$scope.data = {} 


// 一 个 精心 制作 的 自 定 义 弹 窗 
var myPopup = $ionicPopup.show({ 
template: '<input type="password" ng-model="data.wifi">', 
title: 'Enter Wi-Fi Password', 
subTitle: 'Please use normal things', 
scope: $scope, 
buttons: [ 
{ text: 'Cancel' }, 
{ 
text: '<b>Save</b>', 
type: 'button-positive', 
onTap: function(e) { 
if (!$scope.data.wifi) { 
// 不 允许 用 户 关闭 ， 除 非 他 键入 wifi 密码 
e.preventDefault(); 
} else { 
return $scope.data.wifi; 


} 
}, 

] 
}); 
myPopup.then(function(res) { 

console.log('Tapped!', res); 
}); 
$timeout(function() { 

myPopup.close(); // 由 于 某 种 原因 3 秒 后 关闭 弹出 
}, 3000); 


// 一 个 确认 对 话 框 
$scope.showConfirm function() { 
var confirmPopup $ionicPopup.confirm( { 
title: 'Consume Ice Cream', 
template: 'Are you sure you want to eat this ice cream?' 


3); 
confirmPopup.then(function(res) { 
if(res) { 
console.log('You are sure'); 
} else { 
console.log('You are not sure'); 
} 
}); 
}; 


// 一 个 提示 对 话 框 
$scope.showAlert = function() { 
var alertPopup = $ionicPopup.alert({ 
title: 'Don\'t eat that!', 
template: 'It might taste good' 
}); 
alertPopup.then(function(res) { 
console.log('Thank you for not eating my delicious ice cream cone'); 


J); 


show( 7 24) 
显示 一 个 复杂 的 对 话 框 。 这 是 一 个 所 有 弹 窗 的 主体 显示 功能 。 


一 个 带 有 ka 组 的 复杂 弹 窗 ， 每 个 按钮 带 有 一 个 文本 和 类 型 字段 ， 此 外 还 有 一 个 

onTap 功能 。 当 点 击 弹 窗 上 的 相关 按钮 ， 会 触发 onTap 函数 ， 默 认 会 关闭 弹 窗 ， 处 理 弹 窗 的 
返回 值 。 如 果 你 想 阻止 默认 动作 ， 点 击 按 钮 保持 打开 弹 窗 ， 当 点 击 一 个 事件 时 ， 触 

发 event.preventDefault() ° 详 见 下 文 £ 


参数 类 型 详情 
options object 新 弹 窗 的 选项 的 表现 形式 


title: '', // String. 弹 窗 的 标题 。 
subTitle: '', // String (可 选 )。 弹 窗 的 子 标题 。 
template: '', // String (可 选 )。 放 在 弹 窗 body 内 的 htm1 模 板 。 
templateUrl: '', // String (可 选 )。 在 弹 窗 body 内 的 html 模 板 的 URL ° 
scope: null, // Scope (可 选 )。 一 个 链接 到 弹 窗 内 容 的 Scope (作用 域 ) 。 
buttons: [{ //Array[Object] (可 选 )。 放 在 弹 窗 footer 内 的 按钮 。 
text: 'Cancel', 
type: 'button-default', 
onTap: function(e) { 
// 4 &#H > e.preventDefault() 会 阻止 弹 窗 关 闭 。 
e.preventDefault(); 
} 
}, { 
text: 'OK', 
type: 'button-positive', 
onTap: function(e) 
// 返回 的 值 会 导致 处 理 给 定 的 值 。 
return scope.data.response; 
3] 


e 返回 : object 当 关 闭 弹 窗 时 ， 处 理 一 个 promise。 有 一 个 附加 的 关闭 函数 ， 用 于 利用 程 
序 关闭 弹 窗 。 


alert( 可 选 ) 


显示 一 个 带 有 一 段 信 息 和 一 个 用 户 可 以 点 击 关闭 弹 窗 的 按钮 的 简单 提示 弹 窗 。 


= 


参数 类 型 Details 


options object 显示 提示 的 选项 形式 


title: '', // String. 弹 窗 的 标题 。 

subTitle: '', // String (可 选 )。 弹 窗 的 子 标题 。 

template: '', // String (可 选 )。 放 在 弹 窗 body 内 的 htm1 模 板 。 
templateUrl: '', // String (可 选 )。 放 在 弹 窗 body 内 的 html 模 板 的 URL。 
okText: '', // String (Sik: 'OK')。0K 按 钮 的 文字 。 

okType: '', // String (Ri: 'button-positive')。0K 按 钮 的 类 型 。 


e 返回 : object 当 弹 窗 关闭 时 ， 处 理 的 一 个 promise。 有 一 个 额外 的 关闭 函数 ， 可 以 被 带 
有 任何 给 定 的 值 的 关闭 程序 调用 。 


confirm( 可 选 ) 


显示 一 个 简单 的 带 有 一 个 取消 和 OK 按钮 的 对 话 框 弹 窗 。 


如 果 用 户 点 击 OK 按 钮 ， 就 设置 promise 为 true， 如 果 用 户 点 击 取消 按钮 则 为 false。 


参数 类 型 详情 
options object 显示 对 话 框 弹 窗 选 项 的 形式 
{ : 
title: '', // String. 弹 窗 标题 。 
subTitle: '', // String (可 选 )。 弹 窗 的 副标题 。 
template: '', // String (可 选 )。 放 在 弹 窗 body 内 的 htm1 模 板 。 
templateUrl: '', // String (可 选 )。 放 在 弹 窗 body 内 的 一 个 htm1 模 板 的 URL。 
cancelText: '', // String (RU: 'Cancel')。 一 个 取消 按钮 的 文字 。 
cancelType: '', // String (RU: 'button-default')。 取 消 按钮 的 类 型 。 
okText: '', // String (Sik: 'O0K')。0K 按 钮 的 文字 。 
okType: '', // String (Ri: 'button-positive')。0K 按 钮 的 类 型 。 
} 


e 返回 : object 当 关 闭 对话 框 时 ， 处 理 的 一 个 promise。 当 弹 窗 关闭 时 ， 处 理 的 一 个 
promise。 有 一 个 额外 的 关闭 函数 ， 可 以 被 带 有 任何 给 定 的 值 的 关闭 程序 调用 。 


prompt( 可 选 ) 


显示 一 个 简单 的 提示 弹 窗 ， 带 有 一 个 input ，OK 按钮 ， 和 取消 按钮 。 如 果 用 户 点 击 OK， 就 设 
置 promise 的 值 ， 如 果 用 户 点 击 取 消 ， 则 值 为 未 定义 。 


$ionicPopup.prompt({ 
title: 'Password Check', 
template: 'Enter your secret password', 
inputType: 'password', 
inputPlaceholder: 'Your password' 
}).then(function(res) { 
console.log('Your password is', res); 


3); 


参数 类 型 详情 


options object 显示 的 提示 弹 窗 选项 的 形式 


title: '', // String. 弹 窗 的 标题 。 

subTitle: '', // String (可 选 )。 弹 窗 的 副标题 。 

template: '', // String (可 选 )。 放 在 弹 窗 body 内 的 htm1 模 板 。 
templateUrl: '', // String (可 选 )。 放 在 弹 窗 body 内 的 htm1 模 板 的 URL。 
inputType: // String (Riu: 'text')。input 的 类 型 。 
inputPlaceholder: // String (RU: '')。input 的 placeholder ° 
cancelText: // String (RU: 'Cancel')。 取 消 按钮 的 文字 。 
cancelType: // String (RU: 'button-default')。 取 消 按钮 的 类 型 。 
okText: // String (RU: 'OK')。0K 按 钮 的 文字 。 

okType: // String (RU: 'button-positive') ° Ok#aAy RA © 


e 返回 : object 当 关 闭 对 话 框 时 ， 处 理 的 一 个 promise。 当 弹 窗 关 闭 时 ， 处 理 的 一 个 
promise。 有 一 个 额外 的 关闭 函数 ， 可 以 被 带 有 任何 给 定 的 值 的 关闭 程序 调用 。 


Loading (加 载 ) 


$ionicLoading 


用 一 个 覆盖 层 表 示 当 前 处 于 活动 状态 ， 来 阻止 用 户 的 交互 动作 。 


用 法 


angular.module('LoadingApp', ['ionic']) 
.controller('LoadingCtrl', function($scope, $ionicLoading) { 
$scope.show = function() { 
$ionicLoading.show( { 
template: 'Loading...' 


DH; 


$scope.hide = function(){ 
e onic DUN: hide(); 


show(opts) 
示 一 个 loading 指 示 器 。 如 果 该 指示 器 已 经 显示 ， 它 会 设置 给 定 选项 ， 并 保持 指 去 
参数 类 型 详情 
opts object loading 指 示 器 的 选项 。 
可 用 属性 


e {string=} template 指示 器 的 html 内 容 。 

e {string=} templateurl 一 个 加 载 html 模 板 的 url 作 为 指示 器 的 内 容 。 

® {boolean=} noBackdrop 是 否 隐 BA 8 默认 情 况 下 它 会 显示 。 

@ {number=} delay 指示 器 延迟 RS 少 毫秒 显 显示 。 默 认为 不 延迟 。 

e {number=} duration 等 待 多 SBA a 自动 隐 藏 指示 未 器 。 默认 情况 下 ， 指示 器 
示 ， 直 到 触发 .hide() ° 


hide() 


隐藏 loading 指 示 器 ， 如 果 它 已 显示 。 


Ji 


会 一 直 


Ko 


Platform (平台 ) 


SionicPlatform 


一 个 angular 抽 象 的 ionic.Platform ° 


用 来 检测 当前 的 平台 ， 以 及 诸如 在 PhoneGap/Cordova 中 禾 盖 Android 后 退 按钮 。 
方法 
onHardwareBackButton(callback) 


一 些 平 台 有 硬件 的 后 退 按钮 ， 因 此 可 以 用 这 种 方法 绑 定 到 它 。 


参数 类 型 详情 
callback function 当 该 事件 发 生 时 ， 触 发 回调 函数 。 


offHardwareBackButton(callback) 


移 除 一 个 后 退 按钮 的 监听 事件 。 


参数 类 型 详情 
callback function 最 初 绑 定 的 监视 器 元 数 。 


registerBackButtonAction(callback, priority, 


注册 一 个 硬件 后 退 按钮 动作 。 当 点 击 按钮 时 ， 只 有 一 个 动作 会 执行 ， 因 此 该 方法 决定 了 注册 


的 后 退 按钮 动作 具有 最 高 的 优先 级 。 


例如 ， 如 果 一 个 动作 表 已 经 显示 ， 后 退 按钮 应 该 关闭 这 个 动作 表 ， 但 是 它 不 应 该 还 能 返回 一 


个 页 面 视 图 或 关闭 一 个 打开 的 模型 。 


参数 类 型 详情 
; 当 点 击 返 回 按 钮 时 触发 ， 如 果 该 监视 器 具有 最 高 的 优先 
callback function be 6 
priority number 仅 最 高 优先 级 的 会 执行 。 
oe ; 该 id 指定 这 个 动作 o RI : 一 个 随机 且 唯 一 的 id 。 


e 返回 : function 一 个 被 触发 的 函数 ， 将 会 注销 该 后 退 按钮 动作 。 


ready( [callback] ) 


一 旦 设备 就 绪 ， 则 触发 一 个 回调 函数 ， 或 如 果 该 设备 已 经 就 绪 ， 则 立即 调用 。 


参数 类 型 详情 
callback( 可 选 ) function= 触发 的 函数 。 


e 返回 : promise 当 设 备 就 绪 后 ， 就 会 解决 一 个 promise 。 


Gesture (手势 ) 


S$ionicGesture 


一 个 angular 服 务 展 示 ionic ionic.eventController 手势 。 
方法 
on(eventType, callback, $element) 


在 一 个 元 素 上 添加 一 个 事件 监听 器 2 参加 ionic.EventController ° 


参数 类 型 详情 
eventType string 监听 的 手势 事件 。 
callback function(e) 当 手 势 事 件 发 生 时 触发 的 事件 。 
$element element angular 元 素 监听 的 事件 。 


off(eventType, callback, $element) 


在 一 个 元 素 上 移 除 一 个 手势 事件 监听 器 。 参 加 ionic.eventController ° 


参数 类 型 详情 
eventType string 移 除 监听 的 手势 事件 。 
callback function(e) 移 除 监听 器 。 


$element element 被 监听 事件 的 angular 元 素 。 


背景 ) 


Backdrop ( # % 


$ionicBackdrop 


a He 1S KRULL A) HK ° popups? loading > # HUA SAW A HM © 
通常 ， 多 个 UI 组 件 需 要 一 个 背景 ， 但 是 只 有 一 个 背景 经 常 需要 同时 在 DOM 中 。 


因此 ， 每 个 组 件 都 需要 显示 背景 ， 当 它 需 要 背景 时 ， 调 用 $ionicBackdrop.retain() ， 然后 ， 
当 完 成 时 ， 调 用 $ionicBackdrop.release() ° 


每 次 retain 被 调用 时 ， 背 景 会 显示 出 来 直到 调用 release © 


比如 ， 如 果 retain 被 调用 三 次 ， 背 景 就 会 显示 ， 知 道 release 被 调用 三 次 。 


用 法 


function MyController($scope, $ionicBackdrop, $timeout) { 
// 一 秒 显 示 一 个 背景 
$scope.action = function() { 
$ionicBackdrop.retain(); 
$timeout(function() { 
$ionicBackdrop.release(); 
}, 1000); 


了 


Methods 


retain() 


o 


RG HE 


sae 


release() 


释放 背景 。 


Utility (工具 ) 


ionic.Platform 
方法 
ready(calLlback ) 


设备 就 绪 后 触发 一 个 回调 函数 ， 或 如 果 设 备 已 经 就 绪 理 解 触发 。 该 方法 可 以 随处 运行 而 无 需 
通过 任何 附加 方法 封装 。 当 一 个 app 包 含 一 个 Web 视图 (Cordova) ， 当 设备 就 绪 后 它 将 会 触 
发 回调 前 数 。 如 果 该 app 包 含 一 个 Web 浏览 器 ， 它 会 在 window.load 之 后 触发 回调 。 


= Aa 详情 
callback function 调用 的 函数 
device() 


返回 当前 设备 (通过 cordova 提 供 ) 。 


。 返回 : 对 象 设备 对 象 。 
isWebView() 


e@ 返回 : boolean 验证 我 们 是 否 附 带 web 视 图 运行 (比如 Cordova) 。 


isIPad() 


e 返回 : boolean 是 否 在 ijPad 上 运 # 


isI0S() 


e 返回 : boolean 是 否 在 iOS 上 运 # 


isAndroid() 


e 返回 : boolean 是 否 在 Android 上 运行 


isWindowsPhone( ) 


e 返回 : boolean 是 否 在 Windows 手 机 上 运行 。 


platform( ) 


e 返回 : String 当前 平台 的 名 字 。 


version() 
© 返回 : string 当前 设备 平台 的 版 本 。 
exitApp() 


退出 app。 


showStatusBar (shouldShow) 


oe 类 型 详情 
shouldShow boolean 是 否 显 示 状 态 栏 。 


fullScreen([showFullScreen], [showStatusBar ] ) 


设置 app 是 否 全 屏 (Cordova) 。 


参数 类 型 详情 
showFullScreen( 可 选 ) boolean 是 否 设置 app 人 全屏。 默认 为 true。 
showStatusBar( 可 选 ) boolean 是 否 显示 设备 状态 栏 。 默 认为 false。 


属性 
e boolean isReady 
设备 是 否 就 绪 。 


e boolean isFullScreen 


设备 是 否 全 屏 。 


e Array(string) platforms 


一 个 所 有 平台 的 数组 。 


。 string grade 


当前 平台 是 什么 级 别 的 。 


ionic.DomUtil 
方法 


requestAnimationFrame(callback) (2! =: 
ionic.requestAnimationFrame) 


fk A requestAnimationFrame > 2% —~*polyfillde RA TA ° 


= 


参数 类 型 详情 


callback function 触发 下 一 个 框架 时 ， 调 用 该 函数 。 
animationFrameThrottle(callback) (2! 7: 
ionic.animationFrameThrottle) 


当 给 定 一 个 回调 函数 时 ， 如 果 在 框架 动画 之 间 ， 被 调用 100 次 ， 添 加 Throttle 将 会 使 它 只 运行 
最 后 的 100 次 调用 。 


参数 类 型 详情 
callback function 一 个 函数 会 被 requestAnimationFrame 终 止 。 


e 返回 : function —7 LAA i — 7 g 回调 传递 接收 的 内 容 返 回 给 被 调用 的 BH BK © 


getPositionInParent (element) 


获取 一 个 元 素 在 容器 内 滚动 的 偏 移 。 


参数 类 型 详情 
element DOMElement 找到 便宜 的 元 素 。 


e 返回 : object 一 个 位 置 对 象 具 有 如 下 属性 : 
Oo {number} left 元 素 的 左 偏 移 。 
o {number} top 元 素 的 上 偏 移 


ready (callback) 


当 DOM 就 绪 后 调用 一 个 函数 ， 或 如 果 它 已 经 就 行 则 立即 调用 。 


参数 类 型 详情 


callback function 被 掉 用 的 函数 。 


getTextBounds (textNode ) 


获取 一 个 矩形 占用 的 textNode 给 定 的 边界 。 


= 


参数 类 型 详情 


textNode DOMElement textNode 查 找 的 边界 。 


e 返回 : object 一 个 对 象 占据 边界 的 节点 。 属 性 : 
o {number} left textNode 左 侧 位 置 。 
© {number} right textNode 右 侧 位 置 。 
o {number} top textNode 上 位 置 。 
o {number} bottom textNode 下 位 置 。 
o {number} width textNode 的 宽度 。 
o {number} height textNode 的 高 度 。 


getchildIndex(element, type) 


在 给 定 的 元 素 的 指定 类 型 内 获取 第 一 个 子 节点 的 索引 。 


参数 类 型 详情 
element DOMElement 找到 索引 的 元 素 。 
type string 与 子 元 素 对 应 的 节点 名 称 。 


e 返回 : number 索引 ， 或 -1， 匹 配 类 型 的 子 节点 名 称 。 


getParentWithClass(element, className) 


element DOMElement 


className string 


e 返回 : pomelement 匹配 最 近 的 父 元 素 类 名 ， 或 为 空 。 


getParentWithClass(element, className) 


$ 


element 


className 


he 
ja 


DOMElement 


string 


e 返回 : poMElement 匹配 最 近 的 父 元 素 或 自身 ， 或 为 空 。 


rectContains(x, y, x1, y1, x2, y2) 


y2 


e 返回 : boolean 由 {X1,y1,X2,y2} 定 义 的 矩形 内 部 是 否 与 {X,y} 匹 配 。 


number 


number 


number 


number 


number 


number 


= 


类 型 


详情 


详情 


ionic.EventController 
方法 


trigger(eventType, data, [bubbles], [cancelable 
(4 =: ionic.trigger) 


oe An 详情 
eventType string 触发 的 事件 。 
data object 事件 的 数据 S 提示 : 通过 {target: targetElement} 传 
3B © 
bubbles(Tit) boolean 事件 是 否 在 DOM 中 置 泡 。 


cancelable( 可 


boolean 事件 是 否 能 被 取消 。 
选 ) 


on(type, callback, element) (#' +: ionic.on) 


监听 一 个 元 素 上 的 事件 。 


参数 类 型 详情 
type string 监听 的 事件 。 
callback function 触发 监听 器 。 
element DOMElement 监听 该 事件 的 元 素 。 


off(type, callback, element) ( 别 号 : ionic.off) 
移 除 一 个 事件 的 监听 器 。 


参数 


$k 
va 


详情 
type String 
callback function 


element DOMElement 


onGesture(eventType, callback, element) (47: 
ionic.onGesture) 


在 一 个 元 素 上 添加 一 个 手势 事件 监听 器 。 


可 用 的 事件 类 型 (来 自 hammer.js) 
hold , tap , doubletap , drag , dragstart , dragend , dragup , dragdown , dragleft 


dragright , swipe , swipeup , Swipedown , swipeleft , swiperight , transform 


transformstart , transformend , rotate , pinch , pinchin , pinchout , touch , release 


参数 类 型 详情 
eventType string 监听 的 手势 事件 。 
callback function(e) 当 手 势 发 生 时 ， 触 发 的 函数 。 
element DOMElement 监听 事件 的 angular 元 素 。 


offGesture(eventType, callback, element) ( 别 号 : 
ionic.offGesture) 


移 除 一 个 元 素 上 的 事件 监听 器 。 


参数 类 型 详情 
eventType string 手势 事件 
callback function(e) 之 前 添加 的 监听 器 。 
DOMElement 被 监听 的 元 素 。 


element 


Keyboard (键盘 ) 


keyboard 


dt Android 和 iOS ¥, lonic 会 试图 阻止 键盘 的 模糊 输入 以 及 聚焦 元 素 ， 当 在 视图 中 滚动 出 现 的 
时 候 。 为 了 这 项 工作 ， 任 何 可 以 获取 焦点 的 元 素 必须 在 一 个 滚动 视图 或 一 个 类 似 于 带 有 滚动 
视图 的 Content 指 令 内 。 


在 获取 焦点 时 ， 它 会 试图 阻止 原生 的 滚动 溢出 ， 这 可 能 会 导致 布局 问题 ， 比 如 将 header 措 到 
上 面 ， 并 超出 视野 。 


键盘 修复 可 以 和 lonic 键 盘 插件 最 好 的 协同 工作 ， 尽 管 没有 它 ，|onic 键 盘 插 件 也 会 执行 良好 。 
然而 ， 如 果 你 使 用 Cordova 的 话 ， 就 没有 理由 用 该 插件 。 

当 键 盘 显 示 的 时 候 隐藏 

当 键 盘 被 打开 的 时 候 ， 要 隐藏 一 个 元 素 ， 添 加 hide-on-keyboard-open 类 。 


<div class="hide-on-keyboard-open"> 
<div id="google-map"></div> 
</div> 


插件 用 法 


使 用 该 插件 的 用 法 可 以 参考 https://github.com/driftyco/ionic-plugins-keyboard ° 


Android 平 台 注 意 事项 


e 如 果 你 的 app 全 屏 运 行 ， 即 config.xml 文件 内 
有 <preference name="Fullscreen" value="true" /> ? 你 需要 手动 设 


a ionic.Platform.isFullScreen = true ° 


e 你 可 以 配置 web 视图 的 行为 ， 通 过 设置 android:windowSoftInputMode 或 adjustPan 来 显 
TRÉ? 在 你 app 中 AndroidManifest.xml 的 adjustResize 或 adjustNothing 行为 。 
adjustResize 为 lonic 推 荐 设置 ， 但 是 如 果 处 于 一 些 原 因 你 使 用 了 adjustPan ， 那么 你 需 


要 设置 ionic.Platform.isFullScreen = true ° 


&lt;activity android: windowSoftInputMode="adjustResize"&gt; 


iOS 平 台 注 意 事项 


。 如 果 在 input 获 取 焦 点 时 ， 你 app 的 内 容 〈 包 含 header) 被 挤 到 上 面 或 视图 以 外 ， 就 需要 
尝试 设置 cordova.plugins.Keyboard.disableScroll(true) 。 这 并 不 会 在 lonic 滚 动 视 图 中 禁 
用 滚动 ， 相 反 ， 它 会 禁用 原生 的 滚动 溢出 ， 当 自动 发 生 input 获 取 焦 点 在 键盘 之 后 时 。 


keyboard-attach 


keyboard-attach 是 一 个 属性 指令 ， 在 键盘 显示 时 ， 它 会 导致 一 个 元 素 巧 浮 在 键盘 上 方 。 目 前 


仅 支 持 ion-footer-bar 指 令 。 


。 该 指令 依赖 lonic 键 盘 插 件 。 

© Android 设 备 未 全 屏 模式 中 ， 即 ， 在 你 的 config.xml 文件 里 设置 
了 <preference name="Fullscreen" value="true" /> ， 该 指令 是 不 必要 的 ， 因 为 她 默认 的 
行为 。 

。 在 iOS 中 ， 在 你 的 footer 中 有 一 个 input， 你 需要 设 


置 cordova. plugins.Keyboard.disableScroll(true) ° 


<ion-footer-bar align-title="left" keyboard-attach class="bar-assertive"> 
<h1 class="title">ts@!</h1> 
</ion- footer -bar> 


